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.


 

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

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

100% pozytywnych opinii w Google – 15 lat doświadczenia przy tworzeniu stron

Opinie umieszczone w Google są niezależne. Nie ma możliwości ich usunięcia, czy też zmiany treści. Można na nie jedynie odpowiedzieć. Są one wiarygodne, gdyż nie można nimi manipulować.

 

 

 

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

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 | Mapa strony | Polityka prywatności
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, tel.: +48 780 060 995, pon. - czw. 8:00 - 16:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe | Mapa strony | Polityka prywatności

Marynarska 54, 59-220 Legnica,, dolnośląskie, Polska,
tel.: +48 780 060 995,
pon. - czw. 8:00 - 16:00