Tło na stronie

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-21

szukaj: tło background html

Tło jednolite

..
<html>
<head>
<title>Strona</title>
<style type="text/css">
body {
 background: #A56FF6;
}
</style>
</head>
<body>
</body>
</html>

W ten sposób uzyskujemy pewne zabarwienie strony. Kolor podać można na 3 sposoby:

nazwa angielska [np. blue, red, white, black]
kod heksadecymalny [np. #999999, #AAA889, #332B185]
kod RGB (red green blue) [np. rgb(120, 10, 38), rgb(10, 110, 8)]

niezależnie od sposobu jaki wybierzemy zawsze stosujemy tą samą składnię:

background: /*Tu wpisujemy jeden z powyższych przykladów;*/

Tablicę kolorów znaleźć można na tej stronie yarpo.republika.pl/www/lekcje/tabela_kolorow.htm.

Tło często może być niezwykle ciekawym elementem strony. Niestety - jeśli weźmie się jedynie standardowy kolor - raczej nie jest to rewelacja. A gdy wybrać tło-grafikę, to rozmiary strony mogą się niebezpiecznie zwiększyć, chyba, że zastosujemy pewną sztuczkę...

Powtarzanie tła

W samym HTML można było wstawić tło i ewentualnie je unieruchomić. na szczęście CSS pozwala na dużo więcej. Na początek pokaże, jak wykorzystać grafikę o rozmiarze 1px szerokości i 100 px wysokości do stworzenia ciekawego tła.

..
<html>
<head>
<title>Strona</title>
<style type="text/css">
body {
 background: transparent url(tlo1.jpg) top left repeat-x;
}
</style>
</head>
<body>
</body>
</html>

Skopiuj ten kod i pobierz grafikę. Zapisz to jako stronę i podziwiaj efekt:-). wszystko się rozgrywa w jednej linijce kodu!!! oto jej tłumaczenie: 'tło: bez_koloru url(scieżka_do_pliku) [zacznij od]gora lewa powtarzaj_wzdłuż_osi_x'

A teraz czas zobacz ja stworzyć taki efekt dla tła o małej wysokości i dużej szerokości:

..
<html>
<head>
<title>Strona</title>
<style type="text/css">
body {
 background: transparent url(tlo2.jpg) top left repeat-y;
}
</style>
</head>
<body>
</body>
</html>

Co bardziej spostrzegawczy obserwator zauważy, że zmieniłem w porównaniu z poprzednim przykładem tylko 2 znaki [1 na 2 w ścieżce pliku i x na y]

Inne możliwości:

nie powtarzaj: no-repeat; [w miejsce repeat-x]
powtarzaj w x i y: repeat; [w miejsce repeat-x]

Atrybut 'background' można przypisać każdemu selektorowi [znacznikowi-tagowi].

Patryk 'yarpo' Jar

szukaj: tło tło background html html

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!