Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >background-size

background-size

background-size: auto | cover | contain | <szerokość> [<wysokość>]

Rozmiar obrazka tła. Najczęściej cover – obrazek wypełnia cały element, a to, co wystaje, zostaje ucięte – albo contain – cały obrazek się mieści, ale może zostać puste miejsce.

Wartości

  • auto – domyślnie: rzeczywisty rozmiar obrazka (gradient wypełnia cały obszar).
  • cover – obrazek powiększa się albo zmniejsza tak, by pokryć cały obszar; proporcje zostają, nadmiar jest ucięty.
  • contain – możliwie największy, ale w całości widoczny; proporcje zostają.
  • szerokość [wysokość] – długości albo procenty obszaru tła: 100px, 50% auto. Pojedyncza wartość to szerokość, wysokość wynika z proporcji.

Wartość początkowa: auto. Dziedziczona: nie. Dotyczy: wszystkich elementów.

Przykłady

Obrazek 500 × 333 px w ramce 150 × 100 px (bez powtarzania):

<figure><div class="sample"></div><figcaption>auto</figcaption></figure>
<figure><div class="sample contain"></div><figcaption>contain</figcaption></figure>
<figure><div class="sample cover"></div><figcaption>cover</figcaption></figure>

figure {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
}
figcaption { font: 12px/1.6 monospace; }
.sample {
  width: 150px;
  height: 100px;
  border: 1px solid #999;
  background: #eee url(/img/slider.jpg) center no-repeat;
}
.contain { background-size: contain; }
.cover { background-size: cover; }
Wynik
auto
contain
cover

Na co uważać

  • contain z domyślnym background-repeat: repeat wypełnia resztę miejsca kolejnymi kopiami obrazka – dopisz no-repeat.
  • cover ucina brzegi obrazka. To, co ważne, utrzymasz w widocznej części przez background-position.
  • Procenty liczą się od obszaru tła (wyznacza go background-origin, domyślnie przestrzeń wewnątrz ramki), a nie od rozmiaru obrazka.
  • W skrócie background rozmiar może stać tylko po położeniu i ukośniku: center / cover.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 3, Firefox 4, Safari 5. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
background-position
background-repeat
background-origin
object-fit
background