Właściwość CSS background-size

Definicja stylu, przeznaczenie i użycie background-size

Właściwość background-size określa rozmiar obrazów tła.

Wartości właściwości background-size

Składnia CSS background-size

background-size: auto | length | cover | contain | initial | inherit;

Wsparcie przeglądarek dla właściwości background-size

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit-, -moz-, -o- określa pierwszą wersję, która działała z prefiksem.

Właściwość
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

Przykładowe zastosowania z właściwością background-size

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

div {
    background-image:url('/images/kurs-style-css/sample.jpg');
    background-repeat:no-repeat;
    background-size:auto;
}

Przykłady właściwości background-size

background-size: auto;

background-size: 200px 100px;

background-size: 100% 100%;

background-size: cover;

background-size: contain;

background-size: contain, cover;

#przyklad1 {
border: 2px solid black;
padding: 25px;
background: url(foto1.jpg), url(foto2.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}

#przyklad2 {
background: url(foto.jpg);
background-repeat: no-repeat;
background-size: contain;
}

#przyklad3 {
background: url(foto.jpg);
background-repeat: no-repeat;
background-size: cover;
}