Background Properties
CSS menyediakan beberapa properti untuk menata background, seperti: background-color, background-image, background-repeat, background-attachment dan background-position.
Background Color
Properti background-color digunakan untuk mengatur warna background suatu elemen.
Contoh di bawah ini menunjukkan, cara mengatur warna background halaman web.
body {
background-color: #f0e68c;
}
Warna pada CSS paling sering ditentukan oleh metode berikut:
- HEX value – seperti “#ff0000”
- RGB value – seperti “rgb(255,0,0)”
- Color name – seperti “red”
Background Image
Properti background-image menetapkan gambar sebagai latar belakang elemen HTML.
Lihat contoh di bawah ini yang menerangkan cara mengatur background gambar pada sebuah halaman:
body {
background-image: url("leaf.jpg");
}
Background Repeat
Secara default background-image property akan mengulang terus baik itu secara vertical maupun horizontal.
Dengan menggunakan properti background-repeat kalian bisa mengontrol bagaimana background gambar akan dipasang/ditampilkan pada background elemen html. Kalian dapat mengatur background gambar akan diulang secara vertikal (sumbu y), horizontal (sumbu x) di kedua arah, atau sebaliknya.
Lihat contoh di bawah ini yang menunjukkan cara mengatur gradient background untuk halaman web dengan perulangan potongan gambar secara horizontal.
body {
background-image: url("gradient.png");
background-repeat: repeat-x;
}
Background Attachment
Background attachment menentukan apakah gambar latar fix (diam) atau akan ikut ter-scroll bersama halaman. Nilainya scroll atau fixed. Defaultnya scroll. Berikut contohnya:
body {
width: 250px;
height: 200px;
overflow: scroll;
background-image: url("recycle.jpg");
background-attachment: fixed;
}
Background Position
Property background-position digunakan untuk menentukan posisi background image.
Jika tidak ada background-position yang ditentukan, gambar ditempatkan pada posisi kiri-atas default elemen yaitu di (0,0). Lihat contoh di bawah ini:
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
Dalam contoh berikut, gambar latar diposisikan di sudut kanan atas dan posisi gambar ditentukan oleh background-position property.
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: 100% top;
}
Background Shorthand Property
Seperti yang bisa kalian lihat dari contoh di atas, ada banyak properti yang bisa digunakan ketika ingin mengatur latar belakang. Tetapi bisa juga menggabungkan semua properti tersebut ke dalam satu properti (single property) untuk mempersingkat kode. Hal ini disebut shorthand property. Berikut contoh kodenya:
body {
background-color: #f0e68c;
background-image: url("smiley.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 25px;
}
Bila menggunakan notasi shorthand, maka contoh di atas dapat ditulis sebagai berikut:
body {
background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;
}
Ketika menggunakan background shorthand property maka kode nilai property nya harus:
background: color image repeat attachment position;
Jika nilai untuk individu background property hilang atau tidak ditentukan saat menggunakan notasi shorthand, maka nilai default untuk properti itu akan digunakan sebagai gantinya, jika ada.