Properti background CSS digunakan untuk menentukan efek latar belakang suatu elemen.
Properti CSS digunakan untuk efek latar belakang:
- warna latar belakang
- background-image
- background-repeat
- background-attachment
- background-position
Warna Latar Belakang
Properti background-color menentukan warna latar belakang dari elemen.
Warna latar belakang halaman diatur seperti ini:
body {
background-color:lightblue;
}
Dengan CSS, warna yang paling sering ditentukan adalah:
- nilai HEX - seperti "# ff0000"
- nilai RGB - seperti "rgb (255,0,0)"
- nama warna - seperti "red"
Pada contoh di bawah ini, <h1>, <p>, dan <div> elemen memiliki warna latar belakang yang berbeda:
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
Background Image
Properti background-image menentukan gambar untuk digunakan sebagai latar belakang suatu elemen.
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Latar belakang gambar untuk halaman dapat diatur seperti ini:
body {
background-image: url("spinner.gif");
}
Jika gambar diulang hanya secara horizontal (repeat-x), latar belakang akan terlihat lebih baik:
body {
background-image: url("spinner.gif");
background-repeat: repeat-x;
}
Catatan: Untuk mengulang gambar secara vertikal mengatur background-repeat: repeat-y;
Background Image - Mengatur posisi dan no-repeat
Catatan: Bila menggunakan gambar latar belakang, menggunakan gambar yang tidak mengganggu teks.
Menampilkan gambar hanya sekali ditentukan oleh properti background-repeat:
body {
background-image: url("spinner.gif");
background-repeat: no-repeat;
}
Dalam contoh di atas, gambar latar belakang ditampilkan di tempat yang sama seperti teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu teks terlalu banyak.
Posisi gambar yang ditetapkan oleh properti background-position:
body {
background-image: url("spinner.gif");
background-repeat: no-repeat;
background-position: right top;
}
Latar Belakang - Properti Singkatan
Seperti yang dapat Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan latar belakang.
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti dalam satu properti tunggal. Ini disebut properti steno.
Properti singkatan untuk latar belakang hanya "background":
body {
background-image: #fffff url("spinner.gif") no-repeat right top;
}
Bila menggunakan properti singkatan urutan nilai properti adalah:
- warna latar belakang
- background-image
- background-repeat
- background-attachment
- background-position
Tidak masalah jika salah satu dari nilai properti yang hilang.
0 komentar:
Posting Komentar