Atrybut background-size w CSS

Definicja i użycie

background-size Atrybut określa rozmiar obrazu tła.

Zobacz również:

CSS Tutorial:Tło CSS,CSS Background (Advanced)

HTML DOM Reference Manual:backgroundSize Property

Przykład

Określa rozmiar obrazu tła:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Spróbuj sam

CSS Syntax

background-size: length|percentage|cover|contain;

Wartość atrybutu

Wartość Opis Test
length

Ustaw wysokość i szerokość obrazu tła.

Pierwsza wartość ustawia szerokość, druga wartość ustawia wysokość.

Jeśli ustawiono tylko jedną wartość, druga wartość zostanie ustawiona na "auto".

 Test
percentage

Ustaw szerokość i wysokość obrazu tła w procentach od elementu nadrzędnego.

Pierwsza wartość ustawia szerokość, druga wartość ustawia wysokość.

Jeśli ustawiono tylko jedną wartość, druga wartość zostanie ustawiona na "auto".

 Test
cover

Rozszerz obraz tła do wystarczająco dużego rozmiaru, aby obraz tła całkowicie pokrył obszar tła.

Niektóre części obrazu tła mogą nie być wyświetlane w obszarze pozycji tła.

 Test
contain Rozszerz obraz do największego rozmiaru, aby szerokość i wysokość całkowicie dostosowały się do obszaru treści. Test

Techniczne szczegóły

Domyślna wartość: auto
Inheritance: nie
Wersja: CSS3
JavaScript Syntax: object.style.backgroundSize="60px 80px"

Więcej przykładów

Rozciągnij obraz tła
Rozciągnij obraz tła, aby całkowicie pokryć obszar treści.
Rozciągnij obraz tła, aby powtórzyć obraz tła poziomo czterokrotnie
Rozciągnij obraz tła, aby obraz tła został powtórzony poziomo dokładnie czterokrotnie.

Wsparcie przeglądarki

Tabela zawiera numer pierwszej wersji przeglądarki, która obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-