Exemplu
Cum de a poziționa un fundal imagine:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea background-position setează poziția de pornire a unei imagini de fundal.
Tip: În mod implicit, un fundal de imagine este plasat în colțul din stânga sus al unui element, și repetate atât pe verticală cât și pe orizontală.
| Valoare implicită: | 0% 0% |
|---|---|
| Mostenit: | no |
| Animatable: | yes. Read about animatable Try it |
| Versiune: | CSS1 |
| sintaxa JavaScript: | object .style.backgroundPosition="center" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4 | 1.0 | 1.0 | 3.5 |
Note: IE8 și versiuni anterioare nu acceptă mai multe imagini de fundal pe un singur element.
CSS Sintaxa
background-position: Valori de proprietate Valoare Descriere Joaca-l left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom Dacă specificați doar un singur cuvânt cheie, cealaltă valoare va fi "center" Joaca - l » x% y% Prima valoare este poziția orizontală, iar a doua valoare este verticală. Colțul din stânga sus este de 0% 0%. Colțul din dreapta jos este de 100% la 100%. Dacă specificați doar o singură valoare, cealaltă valoare va fi de 50%. . Valoarea implicită este: 0% 0% Joaca - l » xpos ypos Prima valoare este poziția orizontală, iar a doua valoare este verticală. Colțul din stânga sus este 0 0. Unitățile pot fi pixeli (0px 0px) sau orice alte unități CSS . Dacă specificați doar o singură valoare, cealaltă valoare va fi de 50%. Puteți amesteca% și pozițiile Joaca - l » initial Setează această proprietate la valoarea implicită. Citiți despre inițială Joaca - l » inherit Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Mai multe exemple
Exemplu
Cum de a poziționa un fundal imagine, folosind procente:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Încearcă - l singur »
Exemplu
Cum de a poziționa un fundal imagine folosind pixeli:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Încearcă - l singur »
Pagini similare
Tutorial CSS: CSS Context
Referință CSS: background-image property
HTML DOM referință: backgroundPosition property