Postingan saya kali ini adalah tentang Background CSS, berikut penjelasannya.
CSS Background
CSS Background digunakan untuk menentukan efek latar belakang pada elemen.
Properti CSS Background :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
1. Background Color
Properti background-color menentukan warna latar belakang dari elemen.
Misal kita ingin merubah warna background body dari halaman yang kita buat, maka kita bisa mencoba dari script dibawah ini :
Hasil dari script diatas adalah :
Pada contoh di bawah ini, elemen <body>, <h1>, <p>, dan <div> memiliki warna latar belakang yang berbeda :
Hasilnya adalah seperti ini :
2. Background Image
Properti background-image menentukan gambar untuk digunakan sebagai latar belakang atau background suatu elemen. Secara default, gambar diulang sehingga mencakup seluruh elemen.
Contoh script memasukan gambar sebagai background dalam halaman :
Hasil di web browser akan seperti ini :
Jika menggunakan gambar sebagai background, sebaiknya gambar tidak menganggu dalam pembacaan teks atau bisa diatasi dengan menambah background-color sendiri pada teks.
3. Background Repeat
Menunjukkan gambar latar belakang tidak diulang jika tidak penuh satu halaman ditentukan oleh properti background-repeat :
body {
background-image: url("img.png");
background-repeat: no-repeat;
}
Untuk mengulang gambar secara vertikal digunakan background-repeat: repeat-y; sedangkan secara horizontal menggunakan background-repeat: repeat-x;
4. Background Attachment
Untuk menentukan bahwa gambar latar belakang harus tetap (tidak akan gulir dengan sisa halaman), menggunakan properti background-attachment :
body {
background-image: url("img.png");
background-attachment: fixed;
}
5. Background Position
Posisi gambar ditentukan oleh properti background-position :
body {
background-image: url("img.png");
background-position: right top;
}
Sekian postingan saya tentang background CSS, semoga bermanfaat.
wassalamualaikum wr. wb.
Referensi :
- http://www.w3schools.com/css/css_background.asp
Tidak ada komentar:
Posting Komentar