Vlastnost background-position

Vlastnost background-position nastavuje umístění obrázku na pozadí prvku. Umístění lze zadat pomocí libovolných jednotek pro velikosti. První hodnota označuje odsazení zleva, druhé - odsazení shora.

Pozici lze také zadat klíčovými slovy. V tomto případě pořadí hodnot není důležité. Klíčová slova pro vertikálu: top, center, bottom. Klíčová slova pro horizontálu: left, center, right.

Jak používat klíčová slova

Chcete-li umístit obrázek pomocí klíčového slova, je třeba zadat jednu hodnotu pro vertikálu a jednu pro horizontálu. Například, pokud zadáte hodnotu top right, obrázek bude nahoře vpravo.

Pořadí slov není důležité: můžete napsat top right, nebo - right top. Pokud je klíčové slovo center - lze jej vynechat. Například, top center je totéž jako pouze top. A center center je totéž jako pouze center.

Syntaxe

selektor {
	background-position: dvě hodnoty oddělené mezerou;
}

Příklad

Ve výchozím nastavení bude obrázek na pozadí v levém horním rohu:

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

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

Příklad

Umístíme obrázek 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;
}

Příklad

Umístíme obrázek 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;
}

Příklad

Umístíme obrázek na pozadí vpravo a na střed svisle:

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

Příklad

Umístíme obrázek na pozadí na střed 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;
}

Příklad

Umístíme obrázek na pozadí ve vzdálenosti 20px zleva a 40px shora:

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

Příklad

Umístíme obrázek na pozadí ve vzdálenosti 90% zleva a 100% shora:

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

Příklad

Umístíme obrázek na pozadí ve vzdálenosti 30px zleva a dole svisle:

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

Příklad

Umístíme obrázek na pozadí ve vzdálenosti 30px zleva a na střed svisle:

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

Příklad

Umístíme obrázek na pozadí ve vzdálenosti 30px shora a na střed vodorovně:

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

Viz také

vlastnost background,
což je zkratková vlastnost pro pozadí