Background Clip & Origin

Properti CSS background-clip &background-origin

Fungsi properti : Menentukan letak tepian file latar belakang.

clip & origin, kedua properti CSS ini sebenarnya secara teknis sama persis.

Kedua properti ini menentukan batas tepi antara elemen dengan background. Baik itu background warna ataupun gambar.
Kedua properti ini juga memiliki 3 pilihan value yaitu :
1. border-box
2. padding-box
3. content-box.

Penjelasan value properti background clip & origin

Perhatikan struktur elemen dibawah ini, terlihat bahwa setiap garis batas membentuk box.

border (Batas tepi)

padding (Antara Batas tepi dengan Konten)

content (Batas tepi konten)

Berdasarkan gambaran struktur diatas itulah penamaan setiap value dari masing-masing properti.
Sehingga dalam penggunaannya penempatan latar belakang memiliki 3 pilihan, yaitu :
1. Latar belakang dimulai dari batas tepi = border-box.
2. Latar belakang dimulai dari batas padding = padding-box.
3. Latar belakang dimulai dari batas konten = content-box.

Praktik

<!-- kode elemen -->
<div>
 <p style='border:1px solid black'>Konten</p>
</div>

<!-- style CSS -->
<style>
div {
    border: 1px solid black
    background-image: url(https://i.ibb.co/Z2ptrfF/bunga50x50.webp);
    background-repeat: no-repeat;
    background-clip: value; /* Lihat contoh untuk menentukan nilai value */
}
</style>

Dibawah ini tampilan untuk masing-masing value :

1. border box

   Konten

2. padding box

   Konten

3. content box

   Konten