Styl atrybutu backgroundPosition
- poprzednia strona backgroundImage
- Następna strona backgroundRepeat
- Wróć do poprzedniego poziomu Obiekt Style HTML DOM
Definicja i użycie
backgroundPosition
Ustawienie lub zwracanie pozycji obrazu tła w elemencie.
Zobacz również:
HTML Styl:Atrybut background
CSS Kurs:Tło CSS
CSS3 Kurs:CSS3 Tło
CSS ReferencjaAtrybut background-image
CSS ReferencjaAtrybut background-position
Przykład
Przykład 1
Zmień pozycję obrazu tła:
document.body.style.backgroundPosition = "top right";
Przykład 2
Zmień pozycję obrazu tła w elemencie <div> na dolny środek:
document.getElementById("myDiv").style.backgroundPosition = "center bottom";
przykład 3
zmień pozycję obrazu tła w elemencie <div> na poziom 200 pikseli i pion 40 pikseli:
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
przykład 4
zwrócenie pozycji obrazu tła w elemencie <div>:
document.getElementById("myDiv").style.backgroundPosition;
gramatyka
zwrócenie atrybutu backgroundPosition:
obiekt.style.backgroundPosition
ustawienie atrybutu backgroundPosition:
obiekt.style.backgroundPosition = value
wartość atrybutu
wartość | opis |
---|---|
|
jeśli określisz tylko jedną nazwę kluczową, druga wartość będzie "center". |
x% y% |
wartość x oznacza pozycję poziomą, wartość y oznacza pozycję pionową. lewy górny róg to 0%. Dolny prawy róg to 100% 100%. jeśli określisz tylko jedną wartość, druga wyniesie 50%. |
xpos ypos |
wartość x oznacza pozycję poziomą, wartość y oznacza pozycję pionową. lewy górny róg to 0 0. Jednostką może być piksel (0px 0px) lub jakakolwiek inna jednostka CSS. jeśli określisz tylko jedną wartość, druga wyniesie 50%. Możesz mieszać % i jednostki. |
initial | ustaw tę właściwość na jej wartość domyślną. Zobacz initial. |
inherit | dziedziczy tę właściwość od elementu nadrzędnego. Zobacz inherit. |
szczegóły techniczne
wartość domyślna: | 0% 0% |
---|---|
wartość zwracana: | ciąg znaków, który oznacza pozycję obrazu tła. |
wersja CSS: | CSS1 |
obsługa przeglądarek
backgroundPosition
jest cechą CSS1 (1996).
wszystkie przeglądarki obsługują je w pełni:
Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera | IE |
obsługiwane | obsługiwane | obsługiwane | obsługiwane | obsługiwane | obsługiwane |
- poprzednia strona backgroundImage
- Następna strona backgroundRepeat
- Wróć do poprzedniego poziomu Obiekt Style HTML DOM