3

kurs

css

Lekcja 6: Tło

css

W tej lekcji dodamy tło i poznamy możliwości jego formatowania:

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

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

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

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

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; }
Przykład
comments powered by Disqus

Do góry