background-origin

Properti CSS background-origin menetapkan apa yang disebut area pemosisian latar belakang.

Artinya, properti ini menentukan akan kemana gambar latar belakang (sudut kiri atas) ketika latar belakang diwarnai.

Nilai yang berbeda akan menghasilkan efek yang berbeda ketika dikombinasikan dengan properti background lainnya seperti background-attachment dan background-clip.

Jika nilai background-attachment diatur ke fixed, nilai properti background-origin diabaikan.

Elemen dalam CSS memiliki 3 area, disebut box yang didefinisikan seperti: border box, padding box, dan content box.

Ada juga area keempat yang disebut kotak margin yang mencakup elemen dan margin luarnya.

box area

Asal gambar latar belakang suatu elemen biasanya sudut kiri atas padding box.

Properti background-origin juga dapat mengambil nilai yang dipisahkan koma sehingga ketika elemen memiliki lebih dari satu gambar latar belakang, setiap nilai diterapkan ke gambar latar belakang yang sesuai.

CSS Syntax

background-origin: padding-box | border-box | content-box | initial | inherit;

Javascript Syntax

object.style.backgroundOrigin="content-box"

default background-origin: padding-box;

Gambar latar belakang dimulai pada tepi perbatasan: di dalam padding tetapi bukan border.

background-origin: border-box;

Gambar latar belakang dimulai dari bawah perbatasan.

background-origin: content-box;

Gambar latar belakang hanya dimulai di tepi konten : itu tidak termasuk padding, atau border.

Browser Support

Tabel berikut ini menunjukkan tingkat dukungan browser untuk fitur animasi yang disediakan oleh Caniuse.com.