Sifat latar belakang CSS digunakan untuk menentukan efek latar belakang untuk elemen.
latar belakang properti CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Warna latar belakang
The background-color properti menentukan warna latar belakang dari elemen.
Warna latar belakang halaman diatur seperti ini:
Dengan CSS, warna yang paling sering ditentukan oleh:
- nama warna yang valid - seperti "red"
- nilai HEX - seperti "#ff0000"
- nilai RGB - seperti "rgb(255,0,0)"
Lihatlah CSS Nilai Warna untuk daftar lengkap dari kemungkinan nilai warna.
Pada contoh di bawah ini, <h1>, <p> , dan <div> elemen memiliki warna latar belakang yang berbeda:
Contoh
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Cobalah sendiri " Gambar latar belakang
The background-image properti menentukan gambar untuk digunakan sebagai latar belakang dari elemen.
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman dapat diatur seperti ini:
Berikut ini adalah contoh dari kombinasi buruk teks dan gambar latar belakang. teks hampir tidak terbaca:
 | Catatan: Bila menggunakan gambar latar belakang, menggunakan gambar yang tidak mengganggu teks. |
|---|
Background Image - Ulangi horizontal atau vertikal
Secara default, background-image properti mengulangi gambar secara horisontal dan vertikal.
Beberapa gambar harus diulang hanya horizontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:
Jika gambar di atas diulang hanya horizontal ( background-repeat: repeat-x; ), latar belakang akan terlihat lebih baik:
Contoh
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Cobalah sendiri " | Catatan: Untuk mengulang gambar secara vertikal mengatur background-repeat: repeat-y; |
|---|
Background Image - Atur posisi dan no-repeat
Menunjukkan gambar latar belakang hanya sekali juga ditentukan oleh background-repeat properti:
Contoh
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Cobalah sendiri " 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 ditentukan oleh background-position properti:
Contoh
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Cobalah sendiri " Background Image - posisi Fixed
Untuk menentukan bahwa gambar latar belakang harus tetap (tidak akan gulir dengan sisa halaman), menggunakan background-attachment properti:
Contoh
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Cobalah sendiri " Latar Belakang - properti Steno
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti background dalam satu properti tunggal. Ini disebut properti steno.
Properti singkat untuk background adalah background :
Bila menggunakan properti singkat urutan nilai properti adalah:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
Tidak masalah jika salah satu dari nilai properti yang hilang, asalkan orang-orang lain dalam urutan ini.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
Semua CSS Background Properti
| Milik | Deskripsi |
|---|---|
| background | Set semua properti background dalam satu deklarasi |
| background-attachment | Menentukan apakah gambar latar belakang tetap atau gulungan dengan sisa halaman |
| background-color | Mengatur warna latar belakang dari elemen |
| background-image | Mengatur gambar latar belakang untuk elemen |
| background-position | Mengatur posisi awal dari gambar latar belakang |
| background-repeat | Menetapkan bagaimana gambar latar belakang akan diulang |