Background-image
klejnot
background-image - ustawia dany obrazek jako tło, możliwe wartości:
*none - bez obrazka w tle, wartość domyślna
*url('nazwaobrazka.jpg') - link do obrazka, który ma być tłem
Przykład:
body
{
background-image: url('../img/tlo.jpg');
}
Pamiętaj ze adres grafiki jest podany jako ścieżka względem arkusza stylów, a nie dokumentu html!
Gdy tworzysz layout zawierający obrazki nie wstawiaj ich przy pomocy tagu Img, tylko nadawaj tło obrazkowe odpowiednim elementom layoutu przy użyciu background-image.
Ponad to gdy ustalasz tło obrazkowe dla jakiegoś elementu, pamiętaj aby ustawić mu również kolor tła, tak aby w razie nie wczytania się grafiki strona pozostała czytelna (nie pojawił się "biały tekst na białym tle").
Wiele obrazków dla jednego elementów
CSS 3 można ustawić kilka obrazków tła dla jednego elementu:
background: url('body-top.gif') top left no-repeat,
url('foo.jpg') top 10px no-repeat,
url('body-bottom.gif') bottom left no-repeat,
url('body-middle.gif') left repeat-y;
Właściwość tą obsługują obecnie tylko przeglądarki oparte o silnik WebKit.