background-size
Ustala rozmiar obrazu tła: pokrycie całości, zmieszczenie w całości albo konkretne wymiary.
- Wartość domyślna
auto auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundSize = "cover"
Przykład
#.card-cover {
aspect-ratio: 16 / 9;
background: url("/img/course.webp") center / cover no-repeat;
}<div class="card-cover" style="aspect-ratio: 16 / 9; max-width: 320px; border-radius: 12px; background: url('/collections/covers/vibe-coding.webp') center / cover no-repeat;"></div>Definicja i zastosowanie
#Właściwość background-size decyduje, jak duży jest obraz tła. Dwie najważniejsze wartości to cover i contain, obie zachowują proporcje obrazu.
cover powiększa obraz tak, żeby pokrył cały element, nawet jeśli część zostanie przycięta. contain dopasowuje obraz tak, żeby zmieścił się w całości, nawet jeśli zostaną puste pasy.
Można też podać szerokość i wysokość wprost, w pikselach lub procentach. Wartość auto przy jednym z wymiarów zachowuje proporcje.
Składnia
#background-size: auto | cover | contain | <szerokość> <wysokość>?;Wartości
#- Naturalny rozmiar obrazu. Duże zdjęcie wystaje poza element.
- Obraz pokrywa całe tło, brzegi mogą zostać przycięte.
- Cały obraz jest widoczny, po bokach mogą zostać puste pasy.
wymiary
Szerokość 120px, wysokość proporcjonalna.procenty
Wymiary względem elementu, proporcje mogą się zniekształcić.
Wartości w praktyce
#auto
.demo { background-size: auto; }cover
.demo { background-size: cover; }contain
.demo { background-size: contain; }120px auto
.demo { background-size: 120px auto; }50% 100%
.demo { background-size: 50% 100%; }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
#- Do okładek kart i banerów prawie zawsze pasuje
coverzbackground-position: center. - W skrócie
backgroundrozmiar podajesz po pozycji i ukośniku:center / cover.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.