CSS3 - tło

CSS3 - background-size

poniedziałek, 07 luty 2011 16:28 pwimmer
Drukuj

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.