kursy
Tło na stronie
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źc można na tej stronie
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 jes unieruchmić. na szćżeście CSS pozwala na dużo więcej. Na początek pokaże, jak wykorzytsac grafikę o rozmiarze 1px szerokości i 100 px wysokości dop 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ówniu z poprzeednim przykladme 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].
Więcej znaleźć można na stronie:
Patryk 'yarpo' Jar
