Kolor tła: selektor {background-color: kolor;}
Przykład: -> h1{background-color: red;}

Wyraz selektor ma zastosowanie do wszystkich elementów, którym chcemy nadać tło. Natomiast jako kolor należy podać definicję koloru.
Tło Obrazkowe: selektor {background-image: url(adres);}
Przykład: -> h1{background-image: url(https://przygody-leopolda.fandom.com/pl/wiki/Big_Floppa);}

Dzięki temu poleceniu można ustalić tło obrazkowe dla danego elementu. Wyraz selektor ma zastosowanie do wszystkich elementów, którym chcemy nadać tło obrazka. adres: względna ścieżka dostępu z miejsca w miejsce należy wpisać drogę uwzględniając wszystkie foldery wchodząc do folderu wpisujemy jego nazwę/ wychodząc z folderu wpisujemy ../ na końcu podajemy nazwę pliku z rozszerzeniem jeżeli jest to zewnętrzny arkusz CSS, to ścieżkę podajemy względem niego "none" - usunie obrazek
Powtarzanie tła: selektor {background-repeat: powtarzanie;}
Przykład: -> h1{background-repeat: "repeat-a" ;}


Wyraz selektor ma zastosowanie do wszystkich elementów powtarzanie:
"repeat" - jednocześnie w poziomie i pionie - domyślnie
"repeat-a" - w poziomie
"repeat-b" - w pionie
"no-repeat" - pojedynczy obrazek - bez powtarzania - w górnym-lewym rogu
Dzięki temu poleceniu można ustalić jeden z czterech sposobów powtarzania się obrazka jako tła.
Pozycja tła: selektor {background-position: "left";}
Przykład: -> h1{background-position: "left";}


pozycja: jedna wartość:
"center" - obrazek na środku (w centrum)
"left" - obrazek po lewej
"right" - obrazek po prawej
"top" - obrazek na górze
"bottom" - obrazek na dole
jednostki miary - odległość od lewej krawędzi
dwie wartości (oddzielone spacją):
"left top" - lewy-górny róg
"left bottom" - lewy-dolny róg
"right top" - prawy-górny róg
"right bottom" - prawy-dolny róg
dwie jednostki miary - pierwsza z nich oznacza odległość od lewej krawędzi, a druga - od górnej
Zaczepienie tła: selektor {background-attachment: "fixed";}
Przykład: -> h1{background-attachment: "fixed";}

zaczepienie: "scroll" - przewijanie tła (domyślnie)
"fixed" - tło nieruchome
Domyślnie tło obrazkowe przesuwa się wraz z przewijaną stroną. Poleceniem tym można sprawić, że tło będzie nieruchome w czasie przewijania zawartości strony.
Łączenie atrybutów tła selektor {background: wartości atrybutów;}
Przykład: -> div{background: #00ff00 url(../../grafiki/cwiczenie_13/tlo_css.jpg) norepeat scroll center;}
Jako wartości atrybutów może występować:
  • kolor tła
  • tło obrazkowe
  • powtarzanie tła
  • zaczepienie tła
  • pozycja tła
Gradient liniowy: selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }
Przykład: -> h1{ background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }

  • to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg)
  • to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika
  • to right - poziomo z lewej do prawej strony (odpowiednik 90deg)
  • to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika
  • to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie)
  • to left bottom - ukośnie z prawego-górnego do lewego-dolnego narożnika
  • to left - poziomo z prawej do lewej strony (odpowiednik 270deg)
  • to left top - ukośnie z prawego-dolnego do lewego-górnego narożnika

    • Można także określić sposób rozłożenia barw w sposób związany z kątem gdzie:
    0deg skierowaną pionową w górę,
    180deg - pionowo w dół

    Kolor1 odległość1, kolor2 odległość2... - kolejne kolory i ich odległości na linii przejścia gradientu. Obowiązkowo trzeba podać przynajmniej dwie pary "kolor odległość". Każda taka para jest rozdzielona od kolejnej znakiem przecinka.
    Gradient promienisty: selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...)}
    p{ background: radial-gradient(circle closest-corner at 20% 50%, red 10px, blue 5px) }

    Jako kształt można wpisać:
    circle - okrąg (domyślnie gdy jako rozmiar podano pojedynczy promień, określony w jednostkach długości, a nie w procentach)
    ellipse - elipsa

    Jako rozmiar można użyć słów kluczowych:
    closest-side - gradient będzie się rozchodził do najbliższej krawędzi elementu
    farthest-side - do najdalszej krawędzi
    closest-corner - do najbliższego narożnika
    farthest-corner - do najdalszego narożnika (domyślnie)
    Kolor1 odległość1, kolor2 odległość2... - kolejne kolory i ich odległości na linii przejścia gradientu. Obowiązkowo trzeba podać przynajmniej dwie pary "kolor odległość". Każda taka para jest rozdzielona od kolejnej znakiem przecinka.