background-origin Özelliği

background-origin özelliği, bir arka plan resminin (sadece resim, dolgu değil) öğeye göre nasıl yerleştirileceğini belirler: arka plan resminin bir kısmı kenarlığın altına taşar, arka plan kenarlığın altına taşmaz veya arka plan sadece öğenin içeriğinin üzerine yerleştirilir (yani padding arkaplânı itecektir).

Sözdizimi

seçici {
	background-origin: padding-box | border-box | content-box;
}

Değerler

Değer	Açıklama
`border-box`	Arka plan resmi kenarlığın altına taşar.
`padding-box`	Arka plan resmi kenarlığın altına taşmaz.
`content-box`	Arka plan resmi sadece içeriğin üzerinde olur.

Varsayılan değer: padding-box.

Notlar

background-origin özelliği, background-attachment fixed değerine sahip olduğunda çalışmaz. Ayrıca background-repeat repeat değerinde olduğunda, background-origin özelliği her zaman border-box değerindeymiş gibi çalışır.

Örnek . Varsayılan

Varsayılan olarak arka plan kenarlığın altına taşmayacaktır:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Örnek . border-box Değeri

Şimdi arka plan kenarlığın altına taşacak:

<div id="elem"></div>

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Örnek . content-box Değeri

Şimdi ise arka plan padding ile itilecek:

<div id="elem"></div>

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Örnek . background-repeat: repeat Durumunda

background-repeat repeat değerinde olduğunda, background-origin özelliği her zaman border-box değerindeymiş gibi çalışır, yani arka plan her zaman kenarlığın altına taşar:

<div id="elem"></div>

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Ayrıca Bakınız

hem arka plan resminin hem de dolgunun konumunu belirleyen background-clip özelliği
arka plan için kısaltma özelliği olan background özelliği