CSS Background Property adalah salah satu properti dalam CSS yang digunakan untuk mengatur latar belakang sebuah elemen HTML.
Ada beberapa cara untuk mengatur latar belakang menggunakan CSS, di antaranya adalah dengan menggunakan properti background-color, background-image, dan background-repeat.
Properti background-color
Contoh penggunaan properti background-color adalah sebagai berikut:
body {
background-color: #F0F8FF;
}
Di atas adalah contoh penggunaan properti background-color untuk mengatur latar belakang halaman dengan warna #F0F8FF.
Properti background-image
Contoh penggunaan properti background-image adalah sebagai berikut:
body {
background-image: url('bg.jpg');
}
Di atas adalah contoh penggunaan properti background-image untuk mengatur latar belakang halaman dengan gambar yang ada pada file bg.jpg.
Properti background-repeat
Contoh penggunaan properti background-repeat adalah sebagai berikut:
body {
background-image: url('bg.jpg');
background-repeat: repeat-x;
}
Di atas adalah contoh penggunaan properti background-repeat untuk mengatur latar belakang halaman dengan gambar yang diulang pada sumbu horizontal (repeat-x)
Selain 3 properti di atas masih banyak lagi properti yang dapat digunakan untuk mengatur latar belakang sebuah elemen HTML seperti background-position, background-size, background-attachment dan lain-lain.
Properti background-position
Properti background-position digunakan untuk menentukan posisi gambar latar belakang pada elemen HTML.
Kamu dapat menentukan posisi gambar dengan menggunakan keyword atau dengan menggunakan nilai pixel.
Contoh penggunaan properti background-position adalah sebagai berikut:
body {
background-image: url('bg.jpg');
background-position: center;
}
Di atas adalah contoh penggunaan properti background-position untuk mengatur posisi gambar latar belakang pada tengah halaman.
Properti background-size digunakan untuk menentukan ukuran gambar latar belakang pada elemen HTML.
Kamu dapat menentukan ukuran gambar dengan menggunakan keyword atau dengan menggunakan nilai pixel atau persen.
Properti background-size
Contoh penggunaan properti background-size adalah sebagai berikut:
body {
background-image: url('bg.jpg');
background-size: cover;
}
Di atas adalah contoh penggunaan properti background-size untuk mengatur gambar latar belakang agar menutupi seluruh halaman.
Properti background-attachment digunakan untuk menentukan apakah gambar latar belakang akan tetap diam saat halaman di-scroll atau tidak.
Kamu dapat menentukan gambar latar belakang tetap diam dengan menggunakan keyword "fixed" atau mengikuti scroll dengan menggunakan keyword "scroll".
Properti background-attachment
Contoh penggunaan properti background-attachment adalah sebagai berikut:
body {
background-image: url('bg.jpg');
background-attachment: fixed;
}
Di atas adalah contoh penggunaan properti background-attachment untuk mengatur gambar latar belakang agar tetap diam saat halaman di-scroll.
Itu tadi beberapa contoh penggunaan properti background-position, background-size, background-attachment.
Dengan menggunakan properti-properti tersebut, Kamu dapat lebih leluasa dalam mengatur latar belakang elemen HTML sesuai dengan keinginan.
