Belajar CSS3 background-size, background-origin dan background-clip

belajar css

Background pada CSS3

CSS3 menyediakan beberapa property 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

Property background-size digunakan 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 property background-size dengan unit pengukuran pixel.

Contoh:

Editor Online
  1. #pixel {
  2. background-size: 120px 100px;
  3. }

Pada contoh diatas Anda memberikan ukuran horizontal 120px dan vertikal 100px.

Dengan nilai cover

Anda bisa memberikan nilai pada property 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.

Contoh:

Editor Online
  1. body {
  2. background-size: cover;
  3. }

Dengan nilai contain

Anda bisa memberikan nilai pada property 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.

Contoh:

Editor Online
  1. #contain {
  2. background-size: contain;
  3. }

Background clip

Property background-clip digunakan untuk menentukan wilayah latar belakang apakah meluas ke perbatasan atau tidak.

Kemungkinan nilai untuk property 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

Contoh:

Editor Online
  1. #padding-box {
  2. background-clip: padding-box;
  3. }
  4. #content-box {
  5. background-clip: content-box;
  6. }

Background origin

Property background-origin digunakan untuk menentukan posisi dari gambar latar belakang.

Kemungkinan nilai untuk property 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

Contoh:

Editor Online
  1. #border-box {
  2. background-origin: border-box;
  3. }
  4. #content-box {
  5. background-origin: content-box;
  6. }

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.

Contoh:

Editor Online
  1. div {
  2. background: url(https://hendky.com/editor/gambar/kucing.jpg) right bottom no-repeat, url(https://hendky.com/editor/gambar/background-hitam.jpg);
  3. height: 400px;
  4. }

Daftar property CSS3 background

PropertyKegunaanya
backgroundMengatur semua property latar belakang dalam satu deklarasi
background-sizeMenentukan ukuran gambar latar belakang
background-clipMenentukan wilayah latar belakang apakah meluas ke perbatasan atau tidak
background-originMenentukan di mana gambar latar belakang diposisikan

Leave a Reply

Your email address will not be published. Required fields are marked *