Svojstvo background-position

Svojstvo background-position zadaje poziciju pozadinske slike elementa. Poziciju možete zadati pomoću bilo koje jedinice za veličine. Prva vrednost označava pomeraj sa leve strane, druga - pomeraj sa vrha.

Takođe možete zadati poziciju ključnim rečima. U ovom slučaju redosled vrednosti nije bitan. Ključne reči za vertikalu: top, center, bottom. Ključne reči po horizontali: left, center, right.

Kako koristiti ključne reči

Da biste postavili sliku pomoću ključne reči, potrebno je navesti jednu vrednost za vertikalu i jednu za horizontalu. Na primer, ako navedete vrednost top right, slika će se postaviti gore desno.

Redosled reči nije bitan: možete napisati top right, a možete i right top. Ako postoji ključna reč center - možete je izostaviti. Na primer, top center, isto je kao i samo top. A center center isto je kao i samo center.

Sintaksa

selektor {
	background-position: dve vrednosti kroz razmak;
}

Primer

Podrazumevano, pozadinska slika će biti u gornjem levom uglu:

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

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

Primer

Hajde da postavimo pozadinsku sliku u gornji desni ugao:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku u donji desni ugao:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku desno i po sredini po vertikali:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku po sredini bloka:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 20px sa leve strane i 40px odozgo:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 90% sa leve strane i 100% odozgo:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 30px sa leve strane i odozdo po vertikali:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 30px sa leve strane i po sredini po vertikali:

<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;
}

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 30px odozgo i po sredini po horizontali:

<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;
}

Vidi takođe

svojstvo background,
koje predstavlja skraćeno svojstvo za pozadinu