Properti background-origin menetapkan apa yang disebut area pemosisian latar belakang. Artinya, ini menentukan di mana asal gambar latar belakang (sudut kiri atas) akan ketika latar belakang dicat.

Nilai yang berbeda akan menghasilkan efek yang berbeda ketika dikombinasikan dengan properti latar belakang lainnya seperti pengulangan latar belakang dan klip latar belakang.

Jika nilai lampiran latar belakang diatur ke tetap, nilai properti asal latar belakang diabaikan.

Elemen dalam CSS memiliki 3 area, disebut kotak, didefinisikan di dalamnya: kotak batas, kotak padding, dan kotak konten.
Ada juga area keempat yang disebut kotak margin yang mencakup elemen dan margin luarnya.

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

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 (nilai pertama untuk gambar pertama, nilai kedua untuk gambar kedua, dan sebagainya). di).

 

Official Syntax:

 

Values:

padding-box

Posisi ini relatif terhadap kotak bantalan. Asal usul gambar pada 0 0 diposisikan di sudut kiri atas kotak pengisi.

border-box

Posisi relatif ke kotak batas. Asal usul gambar pada 0 0 diposisikan di sudut kiri atas tepi luar kotak perbatasan.

content-box

Posisi ini relatif terhadap kotak konten. Asal usul gambar pada 0 0 diposisikan di sudut kiri atas kotak konten.

Contoh:

Ini semua deklarasi background-origin belakang yang valid:

Contoh berikut menetapkan dua asal latar belakang yang berbeda untuk dua gambar latar belakang yang diterapkan pada suatu elemen.