Kolor tła selektor {background-color: kolor;}

body { background-color: red; }
Tło obrazkowe selektor {background-image: url(adres);}

background-image: url("file:///c:/CSS/_rozwiazanie/tla_marginesy/grafiki/tlo_1.jpg");
Powtarzanie tła selektor {background-repeat: powtarzanie}

body {background-repeat: repeat}

powtarzanie: "repeat" - jednocześnie w pionie i poziomie - domyślnie "repeat-x" - w poziomie "repeat-y" - w pionie "no-repeat" - pojedynczy obrazek - bez powtarzania - w górnym-lewym rogu
Pozycja tła selektor {background-position: pozycja;}

body {background-position: center}

pozycja: jedna wartość: jednostki miary:
"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 piksele - px punkty edytorskie - pt wysokość litery "x" - ex wysokość aktualnej czcionki - em centymetry lub milimetry - cm, mm części dziesiętne centymetra pisane z kropką np.: 0.5cm procent wielkości nadrzędnej - % cale - in (1in=2.54cm)
Zaczepianie tła selektor {background-attachment: zaczepienie;}

body {background-attachment: scroll}

zaczepienie: "scroll" - przewijanie tła (domyślnie) "fixed" - tło nieruchome
Łączenie atrybutów tła selektor {background: wartości atrybutów;}

p {color: #800000; background: #00ff00 url(../../grafiki/cwiczenie_13/tlo_css.jpg) norepeat scroll center;}

wartości atrybutów:  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...) }

background: linear-gradient(to bottom, black 0%, white 100%)

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. Wielokropek (czyli "...") na końcu należy usunąć. Określenie odległości kolorów nie jest obowiązkowe - wtedy podane barwy zostaną rozłożone równomiernie w gradiencie.
Gradient promienisty selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) }

p {background: radial-gradient(at 50% 110%, lightskyblue 40%, fuchsia, purple, blue, lime, yellow, orange, red, lightskyblue 60%)}

Jako kształ należy 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

Rozmiar można ustalić na trzy sposoby: słowa kluczowe: 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) promień - podany za pomocą jednostek długości lub procentowo poziom pion - poziomy i pionowy promień elipsy, określony za pomocą jednostek długości lub procentowo