Properti latar belakang CSS digunakan untuk menentukan efek latar belakang untuk elemen.
Properti latar belakang CSS:
Warna latar belakangProperti latar belakang CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Properti latar-warna menentukan warna latar belakang suatu elemen.
Warna latar belakang halaman diatur seperti ini:
Contoh
body {
background-color: lightblue;
}
Dengan CSS, warna paling sering ditentukan oleh:
Nama warna yang valid - seperti "red"
Nilai HEX - seperti "# ff0000"
Nilai RGB - seperti "rgb (255,0,0)"
Lihatlah Nilai Warna CSS untuk daftar lengkap nilai warna yang mungkin.
Pada contoh di bawah ini, elemen <h1>, <p>, dan <div> memiliki warna latar belakang yang berbeda:
Contoh
h1 {Gambar latar belakang
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Properti background-image menentukan gambar yang akan digunakan sebagai latar belakang elemen.
Secara default, gambar diulang sehingga mencakup keseluruhan elemen.
Gambar latar belakang untuk halaman dapat diatur seperti ini:
Contoh
body {
background-image: url ("paper.gif");
}
Berikut adalah contoh kombinasi teks dan gambar latar belakang yang buruk. Teksnya hampir tidak bisa dibaca:
Contoh
body {Bila menggunakan gambar latar belakang, gunakan gambar yang tidak mengganggu teks.
background-image: url ("bgdesert.jpg");
}
Gambar Latar Belakang - Ulangi secara horisontal atau vertikal
Secara default, properti gambar latar belakang mengulangi gambar secara horisontal dan vertikal.
Beberapa gambar harus diulang hanya secara horisontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:
Contoh
body {
background-image: url ("gradient_bg.png");
}
Jika gambar di atas diulang hanya secara horisontal (background-repeat: repeat-x;), background akan terlihat lebih baik:
Contoh
body {Untuk Mengulangi gambar yang diatur secara vertikal gunakan background-repeat: repeat-y;
background-image: url ("gradient_bg.png");
background-repeat: repeat-x;
}
Background Image - Tetapkan posisi dan no-repeat
Menampilkan gambar latar belakang hanya sekali juga ditentukan oleh properti pengulang latar belakang:
Contoh:
body {
background-image: url ("img_tree.png");
background-repeat: no-repeat;
}
Pada contoh di atas, gambar latar belakang ditampilkan di tempat yang sama dengan teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu teks terlalu banyak.
Posisi gambar ditentukan oleh properti posisi latar belakang:
Contoh
body {Gambar Latar Belakang - Posisi Tetap
background-image: url ("img_tree.png");
background-repeat: no-repeat;
background-position: left up;
}
Untuk menentukan bahwa gambar latar belakang harus diperbaiki (tidak akan bergulir dengan sisa halaman), gunakan properti lampiran latar belakang:
Contoh
body {Latar Belakang - properti Shorthand
background-image: url ("img_tree.png");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti latar belakang dalam satu properti tunggal. Ini disebut properti singkatan.
Properti singkat untuk latar belakang adalah latar belakang:
Contoh
body {
background: #ffffff url ("img_tree.png") no-repeat right top;
}
Bila menggunakan properti singkat, urutan nilai properti adalah:
background-color
background-image
background-repeat
background-attachment
background-position
Tidak masalah jika salah satu nilai properti hilang, asalkan yang lain ada dalam urutan ini.
Semua Properti Background pada CS
Property | Description |
---|---|
background | Menetapkan semua properti latar belakang dalam satu deklarasi |
background-attachment | Menetapkan apakah gambar latar adalah tetap atau digulung dengan bagian halaman lainnya |
background-color | Mengatur warna latar belakang elemen |
background-image | Mengatur gambar latar belakang untuk sebuah elemen |
background-position | Mengatur posisi awal gambar latar belakang |
background-repeat | Menetapkan bagaimana gambar latar akan diulang |
Out Of Topic Show Konversi KodeHide Konversi Kode