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
selektor {
background-position: dve vrednosti kroz razmak;
}
Primer
Podrazumevano, pozadinska slika će biti u gornjem levom uglu:
<div id="elem"></div>
#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:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku u donji desni ugao:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku desno i po sredini po vertikali:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku po sredini bloka:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku na udaljenosti
20px sa leve strane i 40px odozgo:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku na udaljenosti
90% sa leve strane i 100% odozgo:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku na udaljenosti
30px sa leve strane i odozdo po vertikali:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku na udaljenosti
30px sa leve strane i po sredini po vertikali:
<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;
}
:
Primer
Hajde da postavimo pozadinsku sliku na udaljenosti
30px odozgo i po sredini po horizontali:
<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;
}
:
Vidi takođe
-
svojstvo
background,
koje predstavlja skraćeno svojstvo za pozadinu