|
background-size |
|
|
Dostępne wartości: |
wartość bezwzględna | wartość względna | auto | contain | cover | inherit |
|
Wartość domyślna: |
auto |
|
Przykład: |
body {background-size:50% 100%;} |
|
Dziedziczenie: |
Nie |
|
Obsługa: |
Chrome |
Wstępna wersja trzeciej specyfikacji CSS daje nam możliwość określenia rozmiaru tła. Korzystając ze stylu background-size, możemy określić zarówno wysokość, jak i szerokość graficznego tła ustawionego dla dowolnego elementu strony. Regulując rozmiar tła, możemy skorzystać z wartości:
bezwzględnych: np. 1 cm 1 cm (wysokość, szerokość);
względnych: np. 50% 50% (wysokość, szerokość);
auto — rozmiar (szerokość i wysokość) tła będzie automatycznie dopasowywany do okna przeglądarki;
cover — skaluje obraz przy zachowaniu proporcji boków do najmniejszych wartości, tak by dało się pokryć tłem cały obszar;
contain — skaluje obraz przy zachowaniu proporcji boków do największych wartości, tak by dało się pokryć tłem cały obszar.
Określenie jednej wartości powoduje, że druga zostanie automatycznie zastąpiona przez opcję auto. Nie możemy korzystać z wartości ujemnych.
Przykład stylu wykorzystującego tło o określonym rozmiarze może mieć następującą postać:
BODY
{
background-image:url(tlo.jpg);
background-size:30% 30%;
}
Przykład działania powyższego arkusza zobaczą jedynie posiadacze przeglądarki Chrome. Natomiast użytkownicy wszystkich pozostałych przeglądarek muszą się zadowolić rysunkiem 15.20.
<<przykład>>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">
<title>Tytuł Strony WWW</title>
<style type="text/css">
BODY
{
background-image:url(tlo.jpg);
moz-background-size:30% 30%;
}
}
</style>
</head>
<body>
</div>
</body>
</html>
<</przykład>>
|
|
Rysunek 15.20. Przykład strony z wymiarowanym graficznym tłem |
