Tło jednokolorowe wstawiamy w CSS instrukcja background-color:kolor. Wartość koloru można podać we wszystkich formatach rozpoznawanych przez CSS. Div posiada kolor aqua.
selektor { background-image: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML! Polecenie pozwala wstawić dowolny obrazek jako tło pod elementem. Pamiętaj jednak, żeby obrazek w tle nie był zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawartości strony i utrudni czytanie.
selektor { background-repeat: powtarzanie }
-repeat - powtarzanie tła w obu kierunkach (domyślnie)
-repeat-x - powtarzanie tła tylko w kierunku poziomym
-repeat-y - powtarzanie tła tylko w kierunku pionowym
-no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
-space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)
-round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)
Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie powtarzania w poziomie czy w pionie lub całkowite zablokowanie.
Pozwala ustalic pozycję obeazka w tle.
selektor { background-position: pozycja }
jako "pozycja" należy wpisać:
Jedną wartość:
center - obrazek na środku (w centrum)
left - obrazek po lewej
right - po prawej
top - na górze
bottom - na dole
jednostka długości - 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 długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej
selektor { background-attachment: zaczepienie }
zaczepienie" należy wpisać:
scroll - przewijanie tła (domyślnie)
fixed - tło nieruchome względem okna przeglądarki
local - tło nieruchome względem elementu (jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3 - MSIE 8, ale nie 9.0; Firefox)
Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę albo kiedy sam element nie ma suwaków, wartość ta działa identycznie jak "scroll".
Selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }
Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby:
słowa kluczowe:
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
kąt - liczony zgodnie z ruchem wskazówek zegara z wartością 0deg skierowaną pionową w górę, a 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. 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.