Background Origin

Bagaimana caranya menyesuaikan gambar dengan tulisan? Bagaimana cara menentukan daerah untuk background? Mudah saja, cukup dengan menggunakan properties background-origin pada CSS. Apa itu background-origin?

Properties background-origin akan menentukan posisi wilayah background-image. background-image dapat ditempatkan dalam area content-box, padding-box atau border-box.

Berikut adalah values yang bisa digunakan pada properti background-origin :
border-box
background akan meluas ke tepi luar perbatasan tapi berada di bawah perbatasan z-index.
padding-box
background akan meluas ke tepi luar padding
content-box
background akan diwarnai dalam content  box.

Contohnya seperti berikut :

See the Pen JGLIB by Dumet_School (@dumet_school) on CodePen.

Terlihat bukan perbedaannya?

Background origin support pada browser IE 9.0, Chrome 1.0, Mozilla 4.0, Safari 3.0 dan Opera 10.5.

Note :
background-origin akan diabaikan ketika background-attachment bernilai fixed.
Jika nilai properties ini tidak diatur dalam properties background yang diterapkan ke elemen setelah properti CSS backround-origin, maka nilai dari properti ini akan mereset ke nilai awal.
Semoga bermanfaat ya :)