background-position

Podsumowanie

background-position ustawia początkowe położenie obrazka tła, który został zdefiniowany.

Wartość początkowa0% 0%
Stosowana dowszystkich elementów. It also applies to ::first-letter and ::first-line.
Dziedziczonano
Percentagesrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
Mediavisual
Wartość wyliczonaa list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
Animatableyes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Składnia

background-position: [ <percentage> | <length> | left | center | right  ] 
                     [ <percentage> | <length> | top  | center | bottom ] ? ;
background-position: [ top | center | bottom ];
background-position: inherit;

Wartości

<percentage> <percentage>
Wraz z parą wartości '0% 0%', lewy górny róg obrazka jest wyrównany względem górnego lewego rogu dopełnienia bloku. Para wartości '100% 100%' umieszcza dolny prawy róg obrazka w dolnym prawym rogu obszaru dopełnienia. Wraz z parą wartości '14% 84%', punkt 14% wszerz i 84% w dół obrazka jest umiejscawiany w punkcie 14% wszerz i 84% w dół obszaru dopełnienia'.
<length> <length>
Wraz z parą wartości '2cm 1cm', górny lewy róg obrazka jest umieszczony 2cm od prawego i 1cm poniżej górnego krańca obszaru dopełnienia.
top left oraz left top
Tak samo jak '0% 0%'.
top, top center, oraz center top
Tak samo jak '50% 0%'.
right top oraz top right
Tak samo jak '100% 0%'.
left, left center, oraz center left
Tak samo jak '0% 50%'.
center oraz center center
Tak samo jak '50% 50%'.
right, right center, oraz center right
Tak samo jak '100% 50%'.
bottom left oraz left bottom
Tak samo jak '0% 100%'.
bottom, bottom center, oraz center bottom
Tak samo jak '50% 100%'.
bottom right oraz right bottom
Tak samo jak '100% 100%'.

Jeśli tylko jedna wartość jest określona, wtedy ustawia położenie poziome, z pozycją pionową 50%. W innym przypadku pierwsza wartość określa położenie w poziomie. Dozwolone są kombinacje słów kluczowych, długości i procentów, jednak, jeśli słowa kluczowe są wymieszane z innymi wartościami, wartości 'left' i 'right' mogą być używane tylko jako pierwsza wartość, zaś wartości 'top' i 'bottom' mogą być używane tylko jako druga wartość. Położenie ujemne jest dozwolone.

Przykłady

.exampleone {
	background-image: url("logo.png");
	background-position: top center;
}

.exampletwo {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.examplethree {
	background-image: url("logo.png");
	background-position: 2cm bottom;
}

.examplefour {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplefive {
	background-image: url("logo.png");
	background-position: 2cm 50%;
}

Specyfikacje

Zgodność z przeglądarką

Przeglądarka Najniższa wersja
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5

Autorzy i etykiety dokumentu

 Autorzy tej strony: mrstork, teoli, Witia, Mgjbot, Ptak82
 Ostatnia aktualizacja: mrstork,