background-image

wyświetlanie rysunku w tle (domyślnie rysunek będzie powielany do wypełnienia całej zadanej powierzchni)

Przykład:

<div style='background-image: url("gfx/znaczek01.gif");'>
przykład wypełniania tła zadanym obrazkiem<br />
obrazek wypełnia powierzchnię w pionie i poziomie<br />
obrazek jest zbyt mały aby wypełnić całą<br />
powierzchnię więc jego kształt jest powielany
</div>

background-repeat

określanie jak ma być powielany obrazek wypełniający tło, dopuszczalne są trzy sposoby:
no-repeat - obrazek nie jest powielany
repeat-x - obrazek jest powielany w poziomie
repeat-y - obrazek jest powielany w pionie

Przykład:

<div style='background-image: url("gfx/znaczek01.gif"); background-repeat: repeat-y;'>
przykład wypełniania tła zadanym obrazkiem<br />
obrazek wypełnia powierzchnię w pionie<br />
obrazek jest zbyt mały aby wypełnić całą<br />
powierzchnię więc jego kształt jest powielany
</div>

background-color

określenie koloru tła, jako parametr podajemy nazwę koloru lub jego reprezentację w systemie szesnastkowym
Przykład:

<div style='background-color: #cc00cc;'>
przykład wypełniania tła zadanym kolorem<br />
kolor podany w reprezentacji szesnastkowej<br />
</div>

background-position

określenie położenia grafiki w tle, mamy tu kilka możliwości:
pozycja w poziomie - left / center / right (odpowiednio: lewo/środek/prawo)
pozycja w pionie - top / center / bottom (odpowiednio: góra/środek/dół)
pozycja dokładna - określenie współrzędnych x i y (pozycję można podać w pixelach lub procentach)

Przykład 1:

<div style='background-image: url("znaczek01.gif"); background-repeat: no-repeat; background-position:right bottom'>
przykład ustawienia obrazka w tle<br />
obrazek pozycjonowany do prawego dolnego rogu<br />
wyświetlony jest pojedynczy obrazek<br />
aby lepiej było widać jego pozycjonowanie
</div>

Przykład 2:

<div style='background-image: url("znaczek01.gif"); background-repeat: no-repeat; background-position:20px 20px'>
przykład ustawienia obrazka w tle<br />
obrazek pozycjonowany na konkretnych współrzędnych x=20 y=20<br />
wyświetlony jest pojedynczy obrzek<br />
aby lepiej było widać jego pozycjonowanie
</div>

Przykład 3:

<div style='background-image: url("znaczek01.gif"); background-repeat: no-repeat; background-position:50% 50%'>
przykład ustawienia obrazka w tle<br />
obrazek pozycjonowany procentowo wg rozmiaru obszaru w którym się znajduje<br />
wyświetlony jest pojedynczy obrzek<br />
aby lepiej było widać jego pozycjonowanie
</div>



Wszytkie powyższe przykłady zaprezentowane zostały przy użyciu obiektu div, ale odnoszą się one także do innych elementów XHTMLa (np.: body, h, p, a, table, td, ol, ul, li).