CSS

Background-image

  • 2007-01-08 15:51
  • 0 komentarzy
  • 6260 odsłon
  • Oceń ten tekst jako pierwszy
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


Odpowiednik html


Wersja specyfikacji


Wsparcie przeglądarek


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