Przykład
Jak pozycjonować background-image:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Właściwość background-position określa pozycję początkową obraz tła.
Tip: Domyślnie background-image jest umieszczony w lewym górnym rogu elementu, a powtarzane zarówno pionowo jak i poziomo.
| Domyślna wartość: | 0% 0% |
|---|---|
| Dziedziczny: | no |
| Animatable: | yes. Read about animatable Try it |
| Wersja: | CSS1 |
| Składnia JavaScript: | object .style.backgroundPosition="center" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| background-position | 1,0 | 4,0 | 1,0 | 1,0 | 3,5 |
Note: IE8, a wcześniej nie obsługuje wielu obrazów tła na jednym elemencie.
Składnia CSS
background-position:value;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Jeśli podacie tylko jedno słowo kluczowe, a druga wartość będzie "center" | Graj " |
| x% y% | Pierwsza wartość jest w pozycji poziomej, a druga wartość jest pionowy. W lewym górnym rogu znajduje się 0% 0%. W prawym dolnym rogu jest 100% 100%. Jeśli podacie tylko jedną wartość, a druga wartość będzie wynosić 50%. , Domyślną wartością jest: 0% 0% | Graj " |
| xpos ypos | Pierwsza wartość jest w pozycji poziomej, a druga wartość jest pionowy. W lewym górnym rogu znajduje się 0 0. Jednostki mogą być pikseli (0px 0px) lub innych jednostek CSS . Jeśli podacie tylko jedną wartość, a druga wartość będzie wynosić 50%. Można mieszać% i pozycje | Graj " |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | Graj " |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Jak pozycjonować obraz tła przy użyciu procent:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Spróbuj sam " Przykład
Jak pozycjonować obraz tła przy użyciu pikseli:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Spróbuj sam " Podobne strony
Kurs CSS: CSS Tło
Odniesienia CSS: background-image property
HTML DOM referencyjny: backgroundPosition property