config

Strona w trakcie modernizacji

Zapraszamy wkrótce

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

Wartość Opis
auto Domyślnie. Obraz tła jest wyświetlany w rozmiarze oryginalnym.
length Ustawia szerokość i wysokość obrazu tła w jednostkach np. px | mm | cm | in | pt | pc | em | ex. Pierwsza wartość określa szerokość, druga wartość ustawia wysokość. Jeśli podana jest tylko jedna wartość, druga jest ustawiana na auto.
percentage Ustawia szerokość i wysokość obrazu tła w procentach elementu nadrzędnego. Pierwsza wartość określa szerokość, druga wartość ustawia wysokość. Jeśli podana jest tylko jedna wartość, druga jest ustawiana na auto.
cover Zmienia rozmiar obrazu tła, aby zakryć cały kontener, nawet jeśli ma rozciągnąć obraz bądź uciąć jedną z krawędzi.
contain Zmienia rozmiar obrazu tła tak, aby obraz był w pełni widoczny.
initial Ustawia tę właściwość na jej wartość domyślną
inherit Dziedziczy tę właściwość z elementu nadrzędnego

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ść chrome edge firefox safari opera
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.

Właściwość CSS:
background-size:

 
Rezultat:
 
Kod CSS:
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;
}

 

 

Obszar działalności – tworzenie stron internetowych w miastach:

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, Tel.: +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
Tel.: +48 780 060 995,
Pon. - pt. 8:00 - 17:00