Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - tło

CSS3 - background-size

Email Drukuj PDF

Tematy: background-size | background-origin | background-clip

Dane w pigułce
Zastosowanie Definiuje wielkość obrazu tła
Dziedziczenie nie
Wartości długość, procent, cover, contain
Wartość domyślna auto
Przykład background-size: 50% 50%
Składnia JavaScript object.style.backgroundSize="50% 50%"

Aby zdefiniować zajmowaną część, należy wpisać w definicji stylu background-size : wartość

Firefox 3.x wymaga użycia stylu z prefiksem: -moz-background-size, Firefox 4 już go nie potrzebuje.

div {
width: 300px; 
height: 150px; 
border: 1px solid; 
background:url(images/stories/css3/tlokot.jpg);
-moz-background-size:50% 50%; /* Firefox 3.x */
background-size:50% 50%;
background-repeat:no-repeat;
}

background-size:50% 50%; - określa szerokość i wysokość obrazka tła w procentach wielkości pojemnika.

background-size:100px 50px; - określa szerokość i wysokość obrazka tła w pikselach.

background-size:cover; - skaluje obraz według najmniejszego boku, aby wypełniał całą powierzchnię pojemnika (może nie być w całości widoczny).

background-size:contain; - skaluje obraz według największego boku, aby był cały widoczny.


Interpretacja: Opera, Chrome, Safari, Firefox, Internet Explorer 9.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V