Rozmiar tła

piątek, 12 marzec 2010 08:36 Administrator
Drukuj

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:

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