Belajar CSS3 – background-(size, origin dan clip)
Pada CSS3 terdapat properti baru yaitu background-size, background-clip dan background origin semuany
Background pada CSS3
CSS3 menyediakan beberapa properti baru untuk mengatur background atau latar belakang pada elemen, seperti: background-size
, background-clip
dan background origin
. Terkait seputar background yang lainnya, Anda bisa baca kembali CSS dasar seputar background.
Background-size
Dengan properti background-size
Anda bisa menggunakannya untuk menentukan ukuran gambar latar belakang atau background. Ukuran bisa ditentukan dalam unit pengukuran, cover dan container.
Dengan nilai pixel
Anda bisa memberikan nilai pada properti background-size
dengan unit pengukuran pixel.
#pixel {
background-size: 120px 100px;
}
Pada contoh diatas Anda memberikan ukuran horizontal 120px dan vertikal 100px.
Dengan nilai cover
Anda bisa memberikan nilai pada properti background-size
dengan unit pengukuran kata kunci cover. Dengan nilai ini maka gambar benar-benar full menutupi konten, tidak ada ruang putih sedikit pun, tidak menyebabkan scrollbar dll.
body {
background-size: cover;
}
Dengan nilai contain
Anda bisa memberikan nilai pada properti background-size
dengan unit pengukuran kata kunci contain. Dengan nilai ini maka gambar akan menjadi sebesar mungkin tergantung pada proporsi gambar latar belakang, mungkin ada beberapa daerah latar belakang yang tidak tercakup oleh gambar latar belakang.
#contain {
background-size: contain;
}
Background-clip
Dengan properti background-clip
Anda bisa menggunakannya untuk menentukan wilayah latar belakang apakah meluas ke perbatasan atau tidak.
Kemungkinan nilai untuk properti ini adalah:
border-box
– (default) latar belakang dicat ke tepi luar perbatasanpadding-box
– latar belakang dicat ke tepi luar paddingcontent-box
– latar belakang dicat dalam kotak konten
#padding-box {
background-clip: padding-box;
}
#content-box {
background-clip: content-box;
}
Background-origin
Dengan properti background-origin
Anda bisa menggunakannya untuk menentukan posisi dari gambar latar belakang.
Kemungkinan nilai untuk properti ini adalah:
border-box
– gambar latar belakang dimulai dari pojok kiri perbatasan atau borderpadding-box
– (default) gambar latar belakang dimulai dari sudut kiri atas tepi paddingcontent-box
– gambar latar belakang dimulai dari pojok kiri konten
#border-box {
background-origin: border-box;
}
#content-box {
background-origin: content-box;
}
Multiple background
Anda bisa menambahkan gambar latar belakang berlapis sekaligus untuk elemen. Gambar latar belakang yang berlapis dipisahkan dengan koma, dan gambar berlapis ditumpuk di atas satu sama lain yang di mana gambar pertama adalah yang paling dekat dengan tampilan.
div {
background: url(https://hendky.com/editor/gambar/kucing.jpg) right bottom no-repeat, url(https://hendky.com/editor/gambar/background-hitam.jpg);
height: 400px;
}
Daftar properti background
Properti | Kegunaanya |
---|---|
background | Mengatur semua properti latar belakang dalam satu deklarasi |
background-size | Menentukan ukuran gambar latar belakang |
background-clip | Menentukan wilayah latar belakang apakah meluas ke perbatasan atau tidak |
background-origin | Menentukan di mana gambar latar belakang diposisikan |