foto1
foto1
foto1
foto1
foto1
1
1

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; }
Przykład

Tło koloru żółtego.

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'); }
 

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