background-position Özelliği

background-position özelliği, bir öğenin arka plan resminin konumunu belirler. Konum, herhangi bir boyut birimi kullanılarak belirlenebilir. İlk değer soldan boşluk, ikincisi ise üstten boşluğu belirtir.

Ayrıca konum anahtar kelimelerle de belirlenebilir. Bu durumda değerlerin sırası önemli değildir. Dikey eksen için anahtar kelimeler: top, center, bottom. Yatay eksen için anahtar kelimeler: left, center, right.

Anahtar kelimeler nasıl kullanılır

Bir resmi anahtar kelimeyle konumlandırmak için, dikey ve yatay eksenler için birer değer belirtilmelidir. Örneğin, top right değeri belirtilirse, resim sağ üst köşede yer alır.

Kelimelerin sırası önemli değildir: top right yazılabileceği gibi right top de yazılabilir. Eğer center anahtar kelimesi varsa - bu atlanabilir. Örneğin, top center ile sadece top aynı anlama gelir. center center ise sadece center ile aynıdır.

Sözdizimi

seçici {
	background-position: boşlukla ayrılmış iki değer;
}

Örnek

Varsayılan olarak arka plan resmi sol üst köşede olacaktır:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini sağ üst köşeye yerleştirelim:

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

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini sağ alt köşeye yerleştirelim:

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

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini sağa ve dikeyde ortaya yerleştirelim:

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

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini bloğun ortasına yerleştirelim:

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

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini soldan 20px ve üstten 40px mesafeye yerleştirelim:

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

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini soldan 90% ve üstten 100% mesafeye yerleştirelim:

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

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini soldan 30px mesafeye ve dikeyde alta yerleştirelim:

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

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini soldan 30px mesafeye ve dikeyde ortaya yerleştirelim:

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

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Arka plan resmini üstten 30px mesafeye ve yatayda ortaya yerleştirelim:

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

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ayrıca bakınız

background özelliği,
arka plan için kısayol özelliğini temsil eder