Lastnost background-position

Lastnost background-position določa položaj slike ozadja elementa. Položaj je mogoče določiti s poljubnimi enotami za velikosti. Prva vrednost označuje odmik od leve, druga - odmik od vrha.

Položaj je mogoče določiti tudi s ključnimi besedami. V tem primeru vrstni red vrednosti ni pomemben. Ključne besede za navpično os: top, center, bottom. Ključne besede za vodoravno os: left, center, right.

Kako uporabljati ključne besede

Za postavitev slike s ključno besedo je treba navesti eno vrednost za navpično os in eno za vodoravno os. Na primer, če navedemo vrednost top right, bo slika zgoraj desno.

Vrstni red besed ni pomemben: lahko napišete top right, lahko pa - right top. Če je prisotna ključna beseda center - jo je mogoče izpustiti. Na primer, top center, je enako kot preprosto top. In center center je enako kot preprosto center.

Sintaksa

selektor {
	background-position: dve vrednosti presledek;
}

Primer

Privzeto bo slika ozadja v zgornjem levem kotu:

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

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

Primer

Postavimo sliko ozadja v zgornji desni kot:

<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

Postavimo sliko ozadja v spodnji desni kot:

<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

Postavimo sliko ozadja desno in na sredini navpično:

<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

Postavimo sliko ozadja na sredino 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

Postavimo sliko ozadja na razdalji 20px od leve in 40px od vrha:

<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

Postavimo sliko ozadja na razdalji 90% od leve in 100% od vrha:

<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

Postavimo sliko ozadja na razdalji 30px od leve in na dnu navpično:

<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

Postavimo sliko ozadja na razdalji 30px od leve in na sredini navpično:

<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

Postavimo sliko ozadja na razdalji 30px od vrha in na sredini vodoravno:

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

Glejte tudi

lastnost background,
ki je okrajšava za lastnosti ozadja