Własności kolorów i tła służą do określania koloru tekstu (ang. foreground color) oraz tła elementu (powierzchni, na której wyświetlana jest zawartość elementu). Jako tło można stosować nie tylko określone kolory, ale również grafikę. Dodatkowo można kontrolować takie własności tła jak: pozycja obrazka w tle, czy i jak ma się on powtarzać oraz czy tło ma być ruchome czy nie względem obszaru roboczego.

Własność color jest dziedziczona w normalny sposób. Wartości własności tła, natomiast nie są dziedziczone, ale tło elementu rodzica prześwituje przez element potomka, ze względu na fakt, że domyślna wartość dla własności background-color to transparent (ang. prześwitujący).

5.3.1 color

Wartości: <color>
Wartość domyślna: zależna od klienta
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność ta służy do określania koloru tekstu znajdującego się w obrębie danego elementu. Istnieje kilka sposobów na określenie koloru tekstu:

EM { color: red }              /* język naturalny */
EM { color: rgb(255,0,0) }     /* wartość RGB od 0 do 255   */

W rozdziale 6.3 znajduje się dokładniejszy opis metod zapisu kolorów.

5.3.2 background-color

Wartości: <color> | transparent
Wartość domyślna: transparent
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania koloru tła elementu.

H1 { background-color: #F00 }

5.3.3 background-image

Wartości: <url> | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność taut ten służy do określania obrazu mającego służyć jako tło danego elementu. Ustawiając jako tło grafikę powinno się zawsze podawać także kolor tła, na wypadek gdyby obraz był z jakiegoś powodu niedostępny. Jeżeli obraz jest dostępny, to nałoży się on na zdefiniowany kolor.

BODY { background-image: url(marble.gif) }
P { background-image: none }

5.3.4 background-repeat

Wartości: repeat | repeat-x | repeat-y | no-repeat
Wartość domyślna: repeat
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność background-repeat służy do kontrolowania sposobu powtarzania się obrazu w tle oraz do określania czy ma się on w ogóle powtarzać.

Wartość repeat oznacza, że obrazek ma się powtarzać zarówno w pionie jak i w poziomie. Wartość repeat-x oznacza, że obrazek będzie powtarzał się tylko w poziomie, a repeat-y tylko w pionie. Wartość no-repeat powoduje brak powtarzania.

BODY {
  background: red url(pendant.gif);
  background-repeat: repeat-y;
}

W powyższym przykładzie obrazek powtarza się tylko w pionie.

5.3.5 background-attachment

Wartości: scroll | fixed
Wartość domyślna: scroll
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność background-attachment jest używany, gdy jako tło elementu określono obraz. Za jego pomocą można określić czy grafika w tle ma pozostać nieruchoma w miarę przewijania dokumentu, czy też przewijać się razem z jego zawartością.

BODY {
  background: red url(pendant.gif);
  background-repeat: repeat-y;
  background-attachment: fixed;
}

CSS1 core: Aplikacje klienckie mogą wartość własności fixed traktować jako scroll. Rekomenduje się jednakże, aby wartość własności fixed była interpretowana poprawnie przynajmniej dla elementów HTML i BODY ponieważ brak jest jakichkolwiek sposobów definiowania grafiki tylko dla tych aplikacji, które obsługują wartość fixed (patrz rozdział 7).

5.3.6 background-position

Wartości: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Wartość domyślna: 0% 0%
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: odnoszące się do rozmiaru samego elementu

Jeżeli jako tło elementu zastosowano obraz graficzny, to własność background-position służy do określania jego pozycji początkowej.

Wartość 0% 0% powoduje, że lewy górny róg obrazu jest wyrównany do lewego górnego rogu elementu (bez otaczjących go marginesów i dopełnienia oraz obramowania). Wartość 100% 100% umieszcza prawy dolny róg obrazu w prawym dolnym rogu elementu. Wartość 14% 84% powoduje że punkt znajdujący się w odległości 14% szerokości obrazu od lewej krawędzi obrazu i 84% wysokości obrazu od górnej krawędzi obrazu zostanie umieszczony w analogicznym punkcie elementu.

Wartość 2cm 2cm umieszcza lewy górny róg obrazu w punkcie znajdującym się w odległości 2cm od lewej i górnej krawędzi elementu.

Jeżeli podana jest tylko jedna wartość (procentowa lub w jednostkach miary), to zostanie ona użyta do określenia pozycji w poziomie, a pozycja w pionie automatycznie zostanie ustawiona na 50%. Jeżeli podane są obie wartości, to pierwsza z nich określa pozycję w poziomie. Wartości procentowe i zwykłe można stosować razem, np. 50% 2cm. Dozwolone są także wartości ujemne.

Dostępny jest także zestaw słów kluczowych służących do określania pozycji tła. Słów kluczowych nie można mieszać z wartościami liczbowymi. Poniżej znajduje się lista możliwych słów kluczowych i objaśnienie ich znaczenia:

• top left i left top - to samo co 0% 0%.
• top, top center oraz center top - to samo co 50% 0%.
• right top i top right - to samo co 100% 0%.
• left, left center oraz center left - to samo co 0% 50%.
• center i center center - to samo co 50% 50%.
• right, right center oraz center right - to samo co 100% 50%.
• bottom left i left bottom - to samo co 0% 100%.
• bottom, bottom center oraz center bottom - to samo co 50% 100%.
• bottom right i right bottom - to samo co 100% 100%.

Przykłady:

BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
BODY { background: url(banner.jpeg) center }       /*  50%  50% */
BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

Jeżeli obraz w tle jest nieruchomy (po zastosowaniu własności background-attachment) względem powierzchni roboczej, to jego położenie ustalane jest względem powierzchni roboczej, a nie elementu.

BODY {
  background-image: url(logo.png);
  background-attachment: fixed;
  background-position: 100% 100%;
}

Powyższy przykład spowoduje umieszczenie obrazu w tle w prawym dolnym rogu powierzchni roboczej.

5.3.7 background

Wartości: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Wartość domyślna: Brak dla własności zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: tylko dla <background-position>

background jest własnością zbiorczą służącą do określania wszystkich dostępnych własności tła (background-color, background-image, background-repeat, background-attachment oraz background-position) w jednym miejscu arkusza stylów.

Możliwe wartości odpowiadają wartościom dostępnym dla wszystkich poszczególnych własności.

BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }

Własność background służy do definiowania wszystkich własności tła. W pierwszej regule powyżej zdefiniowano tylko kolor tła (background-color), w związku z czym pozostałe własności przyjęły wartości domyślne. W drugiej regule natomiast, wartości wszystkich własności zostały określone.

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.