• kolor
• obrazek w tle
• pozycja
• powtarzanie
• polozenie
• rozmiar
• Połączenie właściwości

KOLOR

Kolor tła ustalamy za pomocą background-color.

selektor { background-color: wartość; }

Wykaz podstawowych kolorów.

• black (czarny)
• white (biały)
• red (czerwony)
• blue (niebieski)
• green (zielony)
• silver (srebrny)
• gray (szary)
• yellow (żółty)
• purple (purpurowy)
• maroon (kasztanowy)
• olive (oliwkowy)
• lime (limonkowy)
• aqua (morski)
• teal (teal)
• navy (granatowy)

p { background-color: yellow; }

OBRAZEK W TLE

Obrazek jako tło ustalamy za pomocą background-image.

selektor { background-image: ścieżka do obrazka; }

body { background-image: url('/../images/arrow2.png'); }

Przykład

Kilka obrazków w tle.

selektor { background-repeat: ścieżka do obrazka1, ścieżka do obrazka2; }

POZYCJA

Pozycję obrazka w tle ustalamy za pomocą background-position.

selektor { background-position: wartość; }

Możemy zastosować wartości:

• left - na lewo
• right - na prawo
• top - w górze
• bottom - na dole
• center - na środku
• odległość np. px, em, cm, %

body { background-position: top right; }

POWTARZANIE

Powtarzanie obrazka w tle ustalamy za pomocą background-repeat.

selektor { background-repeat: ścieżka do obrazka; }

Możemy zastosować wartości:

• repeat - powtarzanie w pionie i poziomie
• repeat-x - powtarzanie w poziomie
• repeat-y - powtarzanie w pionie
• no-repeat - bez powtarzania
• space - obrazki w tle i przestrzeń pomiędzy bez przycinania
• round - obrazki w tle bez przycinania

body { background-repeat: repeat-x; }

POŁOŻENIE

Pozycję obrazka w tle ustalamy za pomocą background-position.

selektor { background-attachment: wartość; }

Możemy zastosować wartości:

• scroll - tło przewijane (domyślne)
• fixed - tło zablokowane
• local - tło zablokowane względem elementu, w którym się znajduje

body { background-attachment: fixed; }

ROZMIAR

Rozmiar obrazka ustalamy za pomocą background-size.

selektor { background-size: wartość; }

Możemy zastosować wartości:

• auto - rozmiar obrazka (domyślny)
• cover - rozmiar obrazka zostanie zwiększony na szerokość elementu
• contain - rozmiar obrazka zostanie zwiększony na wysokość elementu
• piksele - rozmiar obrazka w pikselach
• procenty - rozmiar obrazka w procentach

body { background-size: cover; }

POŁĄCZENIE WŁAŚCIWOŚCI

Kilka właściwości w jednej deklaracji.

selektor { background: wartość; }

body { background: blue url(../images/arrow2.png) top center repeax-y; }

źródło:http://www.kurshtmlcss.pl