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/background-attachment]] * [[css/background-position]] * [[css/background-repeat]] * [[css/background-color]] * [[css/background]]

Odpowiednik html

* [[(X)HTML/Atrybuty/Background]], pośrednio też [[(x)html/img]]

Wersja specyfikacji

* CSS 1

Wsparcie przeglądarek

* Opera 3.5 * Internet Explorer 4 * Wiele obrazków obsługuje tylko WebKit
CSS

0 komentarzy