logo-tworzenie-stron-legnica

config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

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;
}

 

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , 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 | Grafik | Strony

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