Kolor

Pierwszym argumentem jest kolor. Definiuje on kolor tła. Można tu wpisać jakiś kolor w akceptowalnym formacie, wartość transparent oznaczającą brak koloru - przezroczystość lub wartość inherit ustawiającą dziedziczenie koloru po rodzicu.

Obrazek

Drugi argument to adres obrazka, który ma być użyty jako tło (nadpisze on ustawienia koloru tła). Można tu wpisać wartość none oznaczającą brak obrazka lub zdefiniować adres (względny lub bezwzględny) pliku z obrazkiem przy pomocy: url(obrazek.png). Oczywiście można również "odziedziczyć" to ustawienie przy pomocy inherit.

Powtarzalność

Trzeci argument definiuje powtarzalność obrazka z tłem. Możemy zażyczyć sobie powtarzanie tła, czyli zapełnienie całej przestrzeni pod elementem tym obrazkiem, jeden pod drugim, jeden obok drugiego przy pomocy wartości repeat. Możemy również zażyczyć powtarzania sobie tylko w poziomie - repeat-x lub pionie - repeat-y lub brak powtarzania - no-repeat. Oczywiście tą wartość również można odziedziczyć.

Sposób wyświetlania

Czwarty argument to sposób wyświetlania. Można zażyczyć sobie aby tło przewijało się razem z tekstem - scroll lub pozostawało w miejscu, pomimo przewijania tekstu - fixed. Dziedziczenie wartości jest również możliwe.

Pozycja tła

Piąty, ostatni argument określa pozycję tła. Może składać się z jednej lub dwóch wartości. Definiuje pozycję tła względem lewego górnego rogu obszaru wyświetlania strony. Można określić tą pozycję przy pomocy wartości procentowych lub wartości słownych. Zarezerwowane wartości słowne to: left, right, center, top, bottom. Wartości left oraz right odnoszą się do pozycji w poziomie, top i bottom do pozycji w pionie, a center zarówno do pionu jak i poziomu.

Kondensacja własności

Własności tła, jak wiele, można kondensować. Taka właśnie kondensacja została zaprezentowana powyżej - wszystkie własności są opisane w jednej. Jednak każda z tych własności posiada własną nazwę i są to: background-color - kolor tła background-image - obraz tła background-repeat - powtarzalność tła background-attachment - sposób wyświetlania background-position - pozycja tła Kiedy nie potrzebujemy ustawiać wszystkich parametrów, możemy skorzystać z tych bardziej konkretnych własności. Każdy nieustawiony element przyjmuje wartość domyślną, więc nie wszystkie elementy muszą być wymienione. W ten sposób zarówno zapis: background: blue url(obraz.png) repeat-x scroll center; jak i zapis: background: url(obraz.png) scroll; czy zapis: background: blue; są poprawne. W pierwszym przykładzie wszystkie własności składowe zostały ustawione. W drugim zostały ustawione obraz tła i sposób wyświetlania, a reszta przyjęła domyślne wartości. Trzeci przykład definiuje tylko kolor tła. Najlepiej, aby skondensowane w ten sposób własności zachowały swoją poprawną kolejność, czyli wymienioną wyżej. Własności, które mają zostać domyślne po prostu omijamy. Domyślne wartości background-color - transparent background-image - none background-repeat - repeat background-attachment - scroll background-position - 0% 0%

Powrot do zadań