Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Rozmiar tła

Email Drukuj PDF

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

 

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

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464207