CSS

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.

Polecenia pokrewne

CSS

0 komentarzy