Svojstvo background-position

Svojstvo background-position zadaje poziciju pozadinske slike elementa. Poziciju možete zadati pomoću bilo koje jedinice za veličine. Prva vrednost označava pomeraj sa leve strane, druga - pomeraj sa vrha.

Takođe možete zadati poziciju ključnim rečima. U ovom slučaju redosled vrednosti nije bitan. Ključne reči za vertikalu: top, center, bottom. Ključne reči po horizontali: left, center, right.

Kako koristiti ključne reči

Da biste postavili sliku pomoću ključne reči, potrebno je navesti jednu vrednost za vertikalu i jednu za horizontalu. Na primer, ako navedete vrednost top right, slika će se postaviti gore desno.

Redosled reči nije bitan: možete napisati top right, a možete i right top. Ako postoji ključna reč center - možete je izostaviti. Na primer, top center, isto je kao i samo top. A center center isto je kao i samo center.

Sintaksa

cssselektor {
  background-position: dve vrednosti kroz razmak;
}

Primer

Podrazumevano, pozadinska slika će biti u gornjem levom uglu:

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

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku u gornji desni ugao:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku u donji desni ugao:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku desno i po sredini po vertikali:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku po sredini bloka:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 20px sa leve strane i 40px odozgo:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 90% sa leve strane i 100% odozgo:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 30px sa leve strane i odozdo po vertikali:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 30px sa leve strane i po sredini po vertikali:

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

Результат:

Primer

Hajde da postavimo pozadinsku sliku na udaljenosti 30px odozgo i po sredini po horizontali:

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

Результат:

Vidi takođe