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

cssselektor {
  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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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ě:

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

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

Результат:

Viz také