background-position
Ustawia położenie obrazu tła w elemencie.
- Wartość domyślna
0% 0%- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundPosition = "center top"
Przykład
#.search {
background: url("/icons/search.svg") no-repeat left 12px center / 16px;
padding-left: 36px;
}<input placeholder="Szukaj w dokumentacji" style="padding: 8px 12px 8px 40px; border-radius: 8px; border: 1px solid #444; width: 100%; background: #111 url('/collections/nextjs.png') no-repeat left 12px center / 18px;">Definicja i zastosowanie
#Właściwość background-position określa, gdzie w elemencie leży obraz tła. Przyjmuje słowa kluczowe (top, center, bottom, left, right), procenty albo długości, najpierw dla osi poziomej, potem dla pionowej.
Procenty działają sprytnie: 0% 0% to lewy górny róg obrazu w lewym górnym rogu elementu, a 100% 100% to prawy dolny róg obrazu w prawym dolnym rogu elementu. 50% 50% wyśrodkowuje obraz.
Przy background-size: cover pozycja decyduje, który fragment zdjęcia zostanie widoczny po przycięciu. Warto ją dopasować do najważniejszej części zdjęcia.
Składnia
#background-position: <pozycja-x> <pozycja-y>?;Wartości
#- Lewy górny róg. Wartość domyślna.
- Środek elementu w obu osiach.
- Prawy dolny róg.
z przesunięciem
16px od prawej i 16px od góry.procenty
Punkt 25% w poziomie i 75% w pionie.
Wartości w praktyce
#left top
.demo { background-position: left top; }center
.demo { background-position: center; }right bottom
.demo { background-position: right bottom; }right 16px top 16px
.demo { background-position: right 16px top 16px; }25% 75%
.demo { background-position: 25% 75%; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Ikonę w polu tekstowym ustaw przez
background-position: left 12px centeri zrób miejsce paddingiem. - Przy
coverustaw pozycję na najważniejszy fragment zdjęcia, na przykładcenter topdla portretów.
Powiązane hasła
#- background-sizeUstala rozmiar obrazu tła: pokrycie całości, zmieszczenie w całości albo konkretne wymiary.
- background-imageUstawia obraz lub gradient jako tło elementu.
- background-repeatDecyduje, czy i jak obraz tła powtarza się, żeby wypełnić element.
- object-positionUstawia położenie obrazu lub wideo wewnątrz jego ramki.
Widzisz błąd albo brakuje przykładu? Napisz do nas.