Tło strony www jest jednym z jej głównych elementów graficznych. Szczególnej wartości nabiera wtedy, kiedy jest widoczne w dużym procencie okna przeglądarki.
Sprawdzonym sposobem ustawiania tła strony jest dodanie w pliku CSS (np. style.css) w miejscu określenia cechy background i określenia jej wartości. W zależności od naszej decyzji określeniem tym może być na przykład nazwa pliku albo nazwa koloru.
body {background-image: url('background.jpg');}
Przy powyższym rozwiązaniu tłem naszej strony będzie plik background.jpg. Ponieważ nie są określone wartości cechy „repeat”, plik będzie wypełniał całe tło strony, powtarzając się zarówno w wymiarze pionowym, jak i poziomym.
W przypadku braku zewnętrznego arkusza stylów css, możemy wstawić w sekcji head kodu naszej strony następujące określenie:
<style type="text/css">
body { tu należy wstawić wybrane rozwiązanie }
</style>
Każdy webmaster powinien pamiętać o tym, że ze względu na czas ładowania strony powinniśmy używać plików o jak najmniejszym ciężarze. Stąd często używaną metodą jest wybieranie mało ważących, specjalnie stworzonych na potrzeby tła szablonów, które powtarzając się (zazwyczaj w dwóch wymiarach), tworzą mało ważące i ładnie wyglądające grafiki backgroundu.
W przypadku zastosowania formuły: „background-repeat: repeat-x;” albo „background-repeat: repeat-y;”, plik wypełniający tło będzie powtarzał się jedynie w pionie albo jedynie w poziomie (zależnie od wybranego rozwiązania):
body {
background-image: url('background.jpg');
background-repeat: repeat-x;
}
W przypadku ustalania koloru tła, możemy użyć następującej funkcji, która ustala jednakowy kolor całego tła:
body {background-color: #D8EEFF;}
ewentualnie po prostu:
body {background: #D8EEFF;}
Często stosowanym zabiegiem jest tworzenie gradientów - obrazów, w których kolor przechodzi od jednego swojego odcienia w drugi, albo kolory pomiędzy sobą. W przypadku chęci wykonania tego typu backgroundu, powinniśmy stworzyć w programie graficznym (np. Adobe Photoshop albo GIMP) odpowiednią grafikę o odpowiedniej długości (w zależności od własnego gustu i wysokości strony). Następnym krokiem jest przycięcie szerokości do jak najmniejszej, np. 1 px, tak aby tło ładowało się jak najkrócej i umieszczenie tła na stronie z określeniem funkcji „repeat”. Dodatkowo, w przypadku określenia koloru strony (background-color), po skończeniu się grafiki, określona barwa wypełni resztę strony, tworząc przejście między gradientem a pozostałą częścią tła. W takim przypadku często jako background-color określa się odcień gradientu, który będzie sąsiadował z pozostałą częścią tła.
Aby tego dokonać, powinniśmy stworzyć gradient a następnie dopasować kolor (np. przy pomocy wtyczki ColorZilla, ewentualnie ręcznie, np. dzięki dostosowywaniu barw przy pomocy techniki rgb) do grafiki. Dzięki temu zabiegowi mamy szansę otrzymać naprawdę profesjonalne i wykonane przez nas samych od początku do końca tło.