Belajar CSS3 – background-(size, origin dan clip)

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 perbatasan
• padding-box – latar belakang dicat ke tepi luar padding
• content-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 border
• padding-box – (default) gambar latar belakang dimulai dari sudut kiri atas tepi padding
• content-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