Vlastnosť background-position

Vlastnosť background-position nastavuje umiestnenie obrázka na pozadí elementu. Umiestnenie je možné špecifikovať pomocou ľubovoľných jednotiek pre veľkosti. Prvá hodnota označuje odsadenie zľava, druhá - odsadenie zhora.

Pozíciu je možné určiť aj kľúčovými slovami. V tomto prípade poradie hodnôt nie je dôležité. Kľúčové slová pre vertikálu: top, center, bottom. Kľúčové slová pre horizontálu: left, center, right.

Ako používať kľúčové slová

Pre umiestnenie obrázka pomocou kľúčových slov je potrebné zadať jednu hodnotu pre vertikálu a jednu pre horizontálu. Napríklad, ak zadáte hodnotu top right, obrázok sa umiestni hore vpravo.

Poradie slov nie je dôležité: môžete napísať top right, alebo right top. Ak je prítomné kľúčové slovo center - je možné ho vynechať. Napríklad, top center je to isté ako jednoducho top. A center center je to isté ako jednoducho center.

Syntax

selektor {
	background-position: dve hodnoty medzerou;
}

Príklad

Predvolene bude obrázok na pozadí v ľavom hornom rohu:

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

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

Príklad

Umiestnime obrázok na pozadí do pravého horného rohu:

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

Príklad

Umiestnime obrázok na pozadí do pravého dolného rohu:

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

Príklad

Umiestnime obrázok na pozadí vpravo a na stred vertikálne:

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

Príklad

Umiestnime obrázok na pozadí na stred bloku:

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

Príklad

Umiestnime obrázok na pozadí vo vzdialenosti 20px zľava a 40px zhora:

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

Príklad

Umiestnime obrázok na pozadí vo vzdialenosti 90% zľava a 100% zhora:

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

Príklad

Umiestnime obrázok na pozadí vo vzdialenosti 30px zľava a dole vertikálne:

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

Príklad

Umiestnime obrázok na pozadí vo vzdialenosti 30px zľava a na stred vertikálne:

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

Príklad

Umiestnime obrázok na pozadí vo vzdialenosti 30px zhora a na stred horizontálne:

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

Pozri tiež

vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie