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.
