Bismillahirrahmanirrahiim
Pada tutorial ini kita akan belajar cara mengatur background (latar belakang) berbagai elemen HTML. Anda dapat mengatur properti latar belakang elemen berikut -
- Properti background-color digunakan untuk mengatur warna latar belakang suatu elemen.
- Properti background-image digunakan untuk mengatur gambar latar belakang suatu elemen.
- Properti background-repeat digunakan untuk mengontrol pengulangan gambar di latar belakang.
- Properti background-position belakang digunakan untuk mengontrol posisi gambar di latar belakang.
- Properti background-attachment digunakan untuk mengontrol pengguliran gambar di latar belakang.
- Properti background property digunakan sebagai singkatan untuk menentukan sejumlah properti latar belakang lainnya.
Berikut ini adalah contoh yang menunjukkan cara mengatur warna latar belakang untuk suatu elemen.
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>
Mengatur Gambar Latar Belakang
Kami dapat mengatur gambar latar belakang dengan memanggil gambar yang disimpan lokal seperti yang ditunjukkan di bawah ini -
<html>
<head>
<style>
body {
background-image: url("images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>
Mengulangi Gambar Background (Latar Belakang)
Contoh berikut menunjukkan cara mengulang gambar latar belakang jika gambar kecil. Anda dapat menggunakan nilai tanpa-pengulangan untuk properti pengulangan-latar belakang jika Anda tidak ingin mengulang gambar, dalam hal ini gambar hanya akan ditampilkan sekali.
Secara default background-repeat properti akan memiliki nilai repeat.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Contoh berikut yang menunjukkan cara mengulang gambar latar belakang secara vertikal.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Contoh berikut menunjukkan cara mengulang gambar latar belakang secara horizontal.
<html>
<head>
<style>
tubuh {
background-image: url ("/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p> Titik tutorial </p>
</body>
</html>
Mengatur Posisi Gambar Background (Latar Belakang)
Contoh berikut menunjukkan bagaimana mengatur posisi gambar latar belakang 100 piksel dari sisi kiri.
<html>
<head>
<style>
body {
background-image: url("/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Contoh berikut menunjukkan bagaimana mengatur posisi gambar latar belakang 100 piksel dari sisi kiri dan 200 piksel ke bawah dari atas.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Mengatur Background Attachment (Lampiran Latar Belakang)
Lampiran latar belakang menentukan apakah gambar latar belakang diperbaiki atau menggulung dengan sisa halaman.
Contoh berikut menunjukkan bagaimana mengatur gambar latar tetap.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
Contoh berikut menunjukkan bagaimana mengatur gambar latar belakang bergulir.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
Properti Singkat (Shorthand Property)
Anda dapat menggunakan properti latar belakang untuk mengatur semua properti latar belakang sekaligus. Misalnya -
<p style = "background:url(/images/pattern1.gif) repeat fixed;"> This parapgraph has fixed repeated background image. </p>
Sampai disini dulu tutorial dari kita, semoga tutorial ini bermanfaat bagi anda dan jika bermanfaat jangan lupa di share, atas segala kekuranganya mohon dimaafkan, jika ada yang ingin ditanyakan silahkan tinggalkan komentar.
0 Comments
Berkomentarlah dengan baik dan sopan