Proprietatea background-position
Proprietatea background-position stabilește
poziția imaginii de fundal a unui element.
Poziția poate fi stabilită folosind orice
unități
de măsură. Prima valoare indică
decalajul din stânga, a doua - decalajul de sus.
De asemenea, poziția poate fi stabilită cu cuvinte cheie.
În acest caz, ordinea valorilor nu
este importantă. Cuvintele cheie pentru verticală: top,
center, bottom. Cuvintele cheie pentru orizontală:
left, center, right.
Cum se folosesc cuvintele cheie
Pentru a poziționa o imagine folosind cuvinte cheie,
trebuie să specificați o valoare pentru verticală
și una pentru orizontală. De exemplu, dacă specificați
valoarea top right, imaginea va fi
plasată în dreapta sus.
Ordinea cuvintelor nu este importantă: puteți scrie top right,
sau puteți - right top. Dacă
există cuvântul cheie center - acesta poate fi omis.
De exemplu, top center, este același lucru ca
doar top. Iar center center
este același lucru ca doar center.
Sintaxă
selector {
background-position: două valori separate de spațiu;
}
Exemplu
Implicit, imaginea de fundal va fi în colțul stânga sus:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Exemplu
Să poziționăm imaginea de fundal în colțul dreapta sus:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal în colțul dreapta jos:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal în dreapta și centrată pe verticală:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal în centrul blocului:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal la distanța de
20px din stânga și 40px de sus:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal la distanța de
90% din stânga și 100% de sus:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal la distanța de
30px din stânga și în jos pe verticală:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal la distanța de
30px din stânga și centrată pe verticală:
<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;
}
:
Exemplu
Să poziționăm imaginea de fundal la distanța de
30px de sus și centrată pe orizontală:
<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;
}
:
Vezi și
-
proprietatea
background,
care este o proprietate scurtă pentru fundal
