Vlastnosť background-position-y

Vlastnosť background-position-y nastavuje umiestnenie obrázka pozadia elementu podľa vertikály.

Vlastnosť môže nadobúdať nasledujúce hodnoty: top, center, bottom, ako aj je možné zadať polohu pozadia v percentách alebo pixeloch.

Syntax

cssselektor {
  background-position-y: hodnota;
}

Príklad

Umiestnime obrázok pozadia navrchu podľa vertikály:

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

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

Результат:

Príklad

A teraz presuňme pozadie na stred:

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

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

Результат:

Príklad

A teraz zadajme polohu pre pozadie v percentách:

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

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

Результат:

Pozri tiež