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

cssselektor {
  background-position: dve hodnoty medzerou;
}

Príklad

Predvolene bude obrázok na pozadí v ľavom hornom 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;
}

Результат:

Príklad

Umiestnime obrázok 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;
}

Результат:

Príklad

Umiestnime obrázok 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;
}

Результат:

Príklad

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

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

Результат:

Príklad

Umiestnime obrázok na pozadí na stred 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;
}

Результат:

Príklad

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

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

Результат:

Príklad

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

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

Результат:

Príklad

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

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

Результат:

Príklad

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

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

Результат:

Príklad

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

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

Результат:

Pozri tiež