Tłem dla elementów HTML może być:

• kolor
• obraz
• gradient

Kolor

Przykład określenia koloru tła w CSS:

body{
    background-color: lightblue;
}

Nic nie stoi na przeszkodzie, aby kolor który chcemy określić jako tło był w jakimś stopniu przezroczysty np.:

body{
   background-color: rgb(0,255,0,.5);
}

Obraz

Tłem dla naszych elementów HTML może być również obraz. Może być to obraz w formacie jpg, gif, png, bmp oraz w każdym innym jaki wspierają przeglądarki. Podałem najczęściej używane formaty, które na pewno będą prawidłowo wyświetlane. Dla teł obrazkowych jest dużo więcej właściwości CSS, które możemy określić.

• background-image. Najważniejsza z właściwości dla teł obrazkowych. Określa ścieżkę do pliku graficznego, który będzie tłem. Przykład użycia:

  body{
      background-image: url("sciezka/do/pliku.jpg");
  }
  

• background-repeat – określa czy obraz będzie powtarzany jeżeli jest mniejszy od elementu HTML. Domyślna wartość to repeat.
  Możliwe wartości:
  • repeat – obraz jest powtarzany,
  • repeat-x – obraz jest powtarzany tylko poziomo,
  • repeat-y – obraz jest powtarzany tylko pionowo,
  • no-repeat – obraz nie jest powtarzany. Jest wyświetlony tylko raz,
  • space – obraz jest powtarzany w taki sposób, aby pokryć cały element, ale bez przycięcia obrazu. Obraz w tym przypadku nie jest skalowany, a pomiędzy powtarzanymi obrazami powstają puste przestrzenie,
  • round – przypadek tak jak w poprzedniej wartości, tylko w tym przypadku obraz jest rozciągany, aby pokryć cały element. Obraz nie jest przycinany,
  • initial – jest ustawiana domyślna wartość,
  • inherit – jest ustawiana wartość background-repeat rodzica.
  Składnia:

  body{
     repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
  }

• background-attachment – określa w jaki sposób będzie się zachowywało tło obrazkowe, gdy strona będzie przewijana. Możliwe wartości:
  • scroll – obraz tła będzie przewijany razem ze stroną. Jest to domyślna wartość,
  • fixed – obraz tła nie będzie się przewijał ze stroną,
  • local – obraz tła będzie się przewijał z elementem,
  • initial – ustawia wartość domyślną,
  • inherit – ustawia wartość background-attachment rodzica.
  Składnia:

  body{
     background-attachment: scroll|fixed|local|initial|inherit;
  }

• background-position – określa w którym miejscu na elemencie będzie wyświetlane obraz tła. Możliwe wartości:
  • left top | left center | left bottom | rigth top | rigth center | rigth bottom | center top | center center | center bottom
  • x% y%
  • xpos ypos – w jednostkach CSS np. px, em itd.
  • initial
  • inherit
  Przykład użycia:

  body{
     background-position:center center;
  }

• background-size – określa w jaki sposób będzie wyświetlana grafika tła. Możliwe wartości:
  • auto – grafika tła będzie wyświetlana w jej oryginalnym rozmiarze,
  • length – grafika tła zostanie wyświetlona w szerokości i wysokości podanej w jednostkach CSS. Jeżeli zostanie podana tylko jedna wartość to grafika zostanie odpowiednio przeskalowana
  • percentege – podobnie jak do wcześniejszego length z tą różnicą, że podajemy te wartości w procentach szerokości i wysokości elementu HTML,
  • cover – obraz tła zostaje rozciągnięty na całą szerokość elementu HTML,
  • contain – obraz zostanie przeskalowany w taki sposób, aby mieć pewność, że będzie wyświetlany w całości,
  • initial,
  • inherit.

Jest również krótka składnia opisu tła. Wartości opisu tła muszą być podane w odpowiedniej kolejności:

• background-color,
• background-image,
• background-repeat,
• background-attachment,
• background-position,

np.:

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Gradient

Gradient liniowy

Opis gradientu liniowego w CSS:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Możliwe wartości direction:

• określenie słowne używając słowa to oraz słów kierunków top, right oraz top, bottom, np.

  background: linear-gradient(to right bottom, red, yellow);

• określenie stopni xxdeg, np.:

  background: linear-gradient(45deg, red, yellow);

Gradient liniowy powtarzany

Ogólna składnia gradientu liniowego powtarzanego

background: repeating-linear-gradient(direction, color-stop1, color-stop2, ... xx%);

Ostatni parametr określa jaką szerokość ma zajmować cały gradient. Jeżeli podamy w tym miejscu 20% to gradient powtórzy się 5 razy

Gradient kołowy

Ogólna składnia gradientu kołowego:

background: radial-gradient(shape, color-stop1, color-stop2, ...);

Parametr shape określa jakiego kstałtu ma być gradient radialny. Domyślną wartością jest elipsa. Można również wybrać koło circle. Parametr shape można pominąć.

W gradiencie kołowym można określić w którym miejscu elementu i w jaki sposób będzie on rysowany. Przykładowe wywołanie:

background: radial-gradient(closest-side at 80% 80%, red, yellow);

Pierwszy parametr określa w jaki sposób będzie wyświetlane rozejście kolorów. Możliwe wartości to:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

Drugi i trzeci parametr określa w którym miejscu będzie środek elipsy/koła rozpoczęcia gradientu.

Gradient kołowy powtarzany

Przykładowa składnia gradientu kołowego powtarzanego:

background: repeating-radial-gradient(closest-side at 80% 80%, red, yellow 10%);

Ostatni parametr określa jaką szerokość ma mieć powtarzany gradient.

05a. Tło - kolor

05b. Tło - obraz

05c. Tło - gradient