• 
  Kolor tła {background-color}

  Jak zmienić kolor tła dowolnego elementu?

• 
  Tło obrazkowe {background-image}

  Jak ustawić tło graficzne (obrazek, zdjęcie) pod dowolnym elementem? Jak ustalić rozmiary obrazka w tle?

• 
  Powtarzanie tła obrazkowego {background-repeat}

  W jaki sposób zapobiec powielaniu grafiki wstawionej w tle albo powielić ją tylko w jednym kierunku (poziomo lub pionowo)?

• 
  Pozycja tła obrazkowego {background-position}

  Jak ustawić obrazek (grafikę, zdjęcie) w tle w określonej pozycji?

• 
  Zaczepienie tła obrazkowego {background-attachment}

  Jak zrobić tło graficzne (obrazek, zdjęcie), które nie przesuwa się przy przewijaniu strony?

• 
  Przycinanie tła {background-clip}

  W jaki sposób usunąć tło spod wewnętrznych marginesów elementu, ale wyświetlić je pod treścią?

• 
  Pozycja początkowa tła obrazkowego {background-origin}

  W jaki sposób określić pozycję obrazka tła, względem której będą liczone wszelkie przesunięcia?

• 
  Rozmiary tła obrazkowego {background-size}

  W jaki sposób przeskalować obrazek wstawiony w tle, tak żeby pasował idealnie?

• 
  Atrybuty mieszane tła {background}

  Jak można najłatwiej ustawić kilka własności tła w jednym poleceniu?

• 
  Gradient liniowy {background: linear-gradient repeating-linear-gradient}

  Jak wypełnić tło płynnym przejściem kilku kolorów w postaci gradientu?

• 
  Gradient promienisty {background: radial-gradient repeating-radial-gradient}

  Jak wypełnić tło płynnym przejściem kilku kolorów, wywołując efekt trójwymiarowej kuli lub oświetlenia latarki?

• 
  Usunięcie tła {background: none, background-color: transparent}

  Jak usunąć wcześniej dodane tło?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

selektor { background-color: kolor }

Polecenie umożliwia wstawienie tła o określonym kolorze pod danym elementem (tekstem).

Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tła strony), można użyć selektora BODY lub HTML.

Przykład {background-color}

Tło koloru czerwonego (red)

Tło koloru żółtego (yellow)

Tło koloru #D08AFF

Tło koloru systemowego Menu

Tło obrazkowe {background-image}

selektor { background-image: url(ścieżka dostępu do obrazka) }

Ś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.

Wspólnie z tą własnością często podaje się dodatkowo kolor tła. W takim przypadku, jeśli obrazek będzie niedostępny lub użytkownik wyłączy wyświetlanie obrazów, tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem.

Jeśli kolor tekstu elementu z tłem obrazkowym jest zbliżony do domyślnego koloru tła strony, wskazane jest podanie dodatkowo takiego koloru tła dla tego elementu, aby tekst był na nim czytelny. Jeżeli tego nie zrobimy, a obrazek nie zostanie wyświetlony, może wystąpić sytuacja typu: "biały tekst na białym tle".

Może się to zdarzyć np. gdy obrazek w tle strony jest dość ciemny. Wtedy określa się zwykle jasny kolor tekstu, zapominając podać równocześnie deklarację ciemnego koloru tła - jako zabezpieczenie. Dopóki obrazek jest widoczny, wszystko jest w porządku, lecz jeśli nie zostanie on wyświetlony, tło przyjmie najczęściej kolor biały (jako domyślny) i w ten sposób otrzymamy stronę, której nie można przeczytać :-(

Przykład {background-image}

To jest akapit z tłem obrazkowym. Jak już pisałem, użycie zbyt jaskrawego tła, może znacznie utrudnić czytanie tekstu...

Sztuczka, pozwalająca ustalić rozmiary obrazka w tle...

Wielokrotne tło obrazkowe

CSS 3 -

selektor { background-image: url(ścieżka dostępu do obrazka 1), url(ścieżka dostępu do obrazka 2),... }

Dzięki powyższej składni możliwe jest wstawienie pod jednym elementem wielu obrazków w tle. Będą ona ułożone jeden pod drugim - na wierzchu wyświetli się pierwsza z wymienionych grafik.

Przykład {background-image}

To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek... To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek... To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek...

Powtarzanie tła obrazkowego {background-repeat}

selektor { background-repeat: powtarzanie }

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.

W CSS 3 wprowadzono dodatkowo możliwość oddzielnego określenia sposobu powtarzania tła w poziomie i w pionie. Na przykład "repeat no-repeat" jest równoznaczne z "repeat-x", a "no-repeat repeat" - "repeat-y". Taki rozszerzony sposób staje się bardziej przydatny w przypadku dodatkowych wartości - "space round" i "round space". Dzięki temu możemy precyzyjnie dopasować sposób powielania grafiki w poziomie i w pionie, w zależności od jej wymiarów w stosunku do wymiarów elementu, pod którym wstawiamy tło.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.

W przeglądarce Chrome 15 ustawienie trybów powtarzania dostępnych w CSS 3 jest równoznaczne z wartością "no-repeat"!

Przykład {background-repeat}

Wielokrotne powtarzanie

CSS 3 -

selektor { background-repeat: powtarzanie obrazka 1, powtarzanie obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób powtarzania. Jeżeli pominiemy ustawienie sposobu powtarzania następnych obrazków, przejmą one ustawienia z pierwszego.

Przykład {background-repeat}

Pozycja tła obrazkowego {background-position}

selektor { background-position: pozycja }

Pozwala ustalić pozycję obrazka w tle.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe oraz ograniczymy jego powtarzanie (no-repeat, repeat-x lub repeat-y).

Przykład {background-position}

Wielokrotna pozycja

CSS 3 -

selektor { background-position: pozycja obrazka 1, pozycja obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inną pozycję. Jeżeli pominiemy pozycję następnych obrazków, przejmą one ustawienia z pierwszego.

Przykład {background-position}

Zaczepienie tła obrazkowego {background-attachment}

selektor { background-attachment: zaczepienie }

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. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia:

body { background-image: url(obrazek.jpg); background-attachment: fixed }

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.

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".

Wielokrotne zaczepienie

CSS 3 -

selektor { background-attachment: zaczepienie obrazka 1, zaczepienie obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób zaczepienia. Jeżeli pominiemy ustawienie sposobu zaczepienia następnych obrazków, przejmą one ustawienia z pierwszego.

CSS 3 -

selektor { background-clip: przycinanie }

Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... }

Przykład {background-clip}

CSS 3 -

selektor { background-origin: początek }

Zgodnie z komputerowym układem współrzędnych punkt zerowy znajduje się zawsze w lewym-górnym narożniku. W przypadku modelu pudełkowego możemy mieć jednak aż trzy takie narożniki - dla różnych obszarów wewnątrz elementu. Ustalenie położenia początkowego okazuje się szczególnie przydatne, jeśli korzystamy również z przycinania tła.

Możliwe jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-origin: początek obrazka 1, początek obrazka 2,... }

Przykład {background-origin}

CSS 3 -

selektor { background-size: rozmiary }

Często zależy nam na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego proporcje, ale również w przypadku powiększania wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle zdjęć o przesadnie dużych wymiarach, ponieważ będą wydłużały czas wczytywania strony.

Możliwe jest również określenie kilku wartości rozmiary tła - kiedy wstawiamy w tle więcej niż jeden obrazek:

selektor { background-size: rozmiary obrazka 1, rozmiary obrazka 2,... }

Przykład {background-size}

Atrybuty mieszane tła {background}

selektor { background: wartości atrybutów }

Wartość rozmiarów tła (background-size) musi być poprzedzona znakiem ukośnika i musi się znajdować bezpośrednio po wartości pozycji (background-position), np.: "left top / contain". Nie można podać rozmiarów tła bez określenia pozycji, ale można samą pozycję bez rozmiarów.

Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty tła. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: url(obrazek) (background-image), no-repeat (background-repeat) czy left (background-position). Wszystkie wartości muszą być oddzielone od siebie spacjami. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red), ponieważ nie zostało to określone w deklaracji background, która tutaj unieważnia background-color:

p { background-color: red; background: url(tlo.gif) }

Zgodnie z zasadą kaskadowości, oczekiwany skutek (czerwone tło) odniesiemy, podając deklaracje w odwrotnej kolejności:

p { background: url(tlo.gif); background-color: red }

albo przenosząc wartość background-color (red) do zbiorczej deklaracji background:

p { background: red url(tlo.gif) }

Przykład {background}

<p style="color: red; background: url(obrazek.jpg) no-repeat left">
	To jest akapit z obrazkiem w tle. obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie.
</p>

To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie.

Tło graficzne obok tekstu

Warto tutaj jeszcze wspomnieć o możliwości dodawania obrazków do dowolnego tekstu. Można w ten sposób stworzyć tekst, obok którego znajduje się jakaś grafika (np. po lewej stronie). Nie trzeba w takim wypadku dodawać znacznika <img>, odpowiadającego za wstawienie rysunku, ale wystarczy np. zadeklarować odpowiednią klasę w zewnętrznym arkuszu stylów, a grafika zostanie dodana jako tło (bez powtarzania). Dodatkowo tekst będzie przesunięty w prawo, aby nie zasłaniał obrazka.

Sposób taki ma tą zaletę, że w każdej chwili możemy usunąć obrazek lub zmienić jego pozycję, bez potrzeby modyfikacji każdej strony, na której występuje taki element. Ma to duże znaczenie, jeśli powtarza się on na wielu stronach. Niestety podczas drukowania strony, obrazek taki zostanie pominęty. Również jeśli przeglądarka nie interpretuje stylów, obrazek nie pojawi się na ekranie. Jeśli nam to przeszkadza, należy stosować tradycyjny sposób (znacznik IMG).

Przykład {background}

*.obrazek { background: url(obrazek.jpg) no-repeat left top; padding-left: 110px }

<p class="obrazek">Po lewej stronie tego tekstu znajduje się obrazek, który... (itd.)</p>

Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie... Po lewej stronie tego tekstu znajduje się obrazek, który został wstawiony automatycznie...

Uwaga: Pogrubiona wartość 110 w deklaracji klasy powyżej, odpowiada za przesunięcie tekstu w prawo i nie powinna być ona mniejsza od szerokości obrazka (w pikselach), aby nie był on zasłonięty!

Wielokrotne atrybuty mieszane

CSS 3 -

selektor { background: wartości atrybutów obrazka 1, wartości atrybutów obrazka 2... }

Korzystając z rozszerzonej składni atrybutów mieszanych, możemy wstawić w tle elementu kilka obrazków i od razu określić dla nich dodatkowe własności, takie jak np. sposób powtarzania, zaczepienie, pozycja / rozmiary, przycinanie czy pozycja początkowa. Trzeba jednak pamiętać, że o ile w tle jednego elementu może być wstawionych kilka obrazków, to ustawienie więcej niż jednego jednolitego koloru tła nie ma sensu. Dlatego podanie jednolitego koloru tła jest dozwolone tylko jeden raz - na samym końcu, tzn. dla ostatniego elementu listy atrybutów mieszanych:

div { background: url(obrazek1.jpg), url(obrazek2.jpg), url(obrazek3.jpg) red }

Gradient liniowy {background: linear-gradient}

CSS 3 -

selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }

Narzędzia tworzące gradienty są znane z edytorów graficznych. Dzięki nim można utworzyć tło, w którym określone barwy będą łagodnie przechodzić pomiędzy sobą. Wcześniej jedyną możliwością wstawienia takiego efektu na stronie WWW było przygotowanie pliku graficznego i umieszczenia go jako tło obrazkowe. Jest to jednak rozwiązanie nieco kłopotliwe, gdyż każdą zmianę trzeba było przygotowywać w programie graficznym. Do tego taki plik graficzny z zapisanym gradientem mógł mieć niemałe rozmiary, niepotrzebnie wydłużając czas wczytywania strony w przeglądarce użytkownika. Dlatego właśnie efekt gradientu wprowadzono do składni CSS, aby dać webmasterom lepszą kontrolę nad wyglądem stron.

Przy definiowaniu wyglądu gradientu kluczowe znaczenie ma tzw. linia gradientu. Musimy sobie ją wyobrazić jako prostą, która przebiega w kierunku przejścia barw z jednej w drugą. Na przykład gdy określimy następujący gradient:

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

uzyskamy gradient z kolorem czarnym (black) na górze i białym (white) na dole. Pomiędzy nimi wystąpi łagodne przejście barw poprzez coraz jaśniejsze odcienie szarości. Wynika z tego, że linia gradientu będzie w tym przypadku skierowana pionowo w dół (to bottom):

Linia gradientu ostatecznie nie jest widoczna na ekranie. Pomaga tylko w wyobrażeniu sobie, jak będzie przebiegało przejście kolorów.

Przykład {background: linear-gradient}

Kierunek "to right top" zwykle nie jest tym samym co kąt 45deg. Użycie słów kluczowych powoduje, że linia gradientu zawsze będzie skierowana idealnie do podanego narożnika, podczas gdy dla kąta 45deg uzyskamy taki efekt tylko dla elementów kwadratowych.

Zwróć uwagę, że kolory na styku poziomej linii, łączącej powyższe elementy, nie pokrywają się idealnie ze sobą.

Powtarzany gradient liniowy {background: repeating-linear-gradient}

CSS 3 -

selektor { background: repeating-linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }

Jeżeli ustawimy odległość punktu początkowego linii gradientu większą od 0% (albo punktu końcowego mniejszą od 100%), tło przed punktem początkowym (albo po końcowym) przyjmie jednolity kolor. Możemy jednak określić, żeby w takim przypadku gradient był powtarzany w kółko, dzięki czemu na całej powierzchni uzyskamy płynne przejścia kolorów. Ten sposób może być przydatny czasami, gdy nie znamy dokładnych wymiarów elementu, do którego dodajemy gradient.

Przykład {background: repeating-linear-gradient}

Dla porównania - tak będzie wyglądał ten sam gradient, ale już bez powtarzania:

Gradient promienisty {background: radial-gradient}

CSS 3 -

selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) }

Gradient promienisty jest tworzony analogicznie jak liniowy, tylko kolory rozchodzą z jednego punktu (domyślnie w centrum powierzchni) równomiernie na zewnątrz we wszystkich kierunkach, aż do narożnika elementu. Wygląda to tak, jakbyśmy patrzyli na oświetloną kulę (bądź elipsoidę) albo powierzchnię oświetloną latarką. Zatem linia gradientu biegnie ze środka na zewnątrz:

Większość zmiennych w deklaracji gradientu promienistego jest opcjonalna. Prawdę mówiąc składnia polecenia jest dość złożona:

Przykład {background: radial-gradient}

Jeżeli identyczną deklarację gradientu wstawimy pod elementem prostokątnym, zamiast okręgu otrzymamy elipsę:

Różnice w rozmiarze gradientu w zależności od użytych słów kluczowych:

Inne ciekawe przykłady:

Powtarzany gradient promienisty {background: repeating-radial-gradient}

CSS 3 -

selektor { background: repeating-radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) }

W przypadku gradientu promienistego szczególnie często zdarza się, że duże powierzchnie tła już poza gradientem są jednolitego koloru. Możemy temu zapobiec poprzez powtarzanie wzoru w kółko.

Przykład {background: repeating-radial-gradient}

Dla porównania - tak będzie wyglądał ten sam gradient, ale już bez powtarzania:

selektor { background: none }

Polecenie umożliwia wykasowanie zdefiniowanego wcześniej tła. Okazuje się ono przydatne, częściej niż można by sądzić. Na przykład wyobraźmy sobie, że w zewnętrznym arkuszu stylów określamy ogólne własności dla wszystkich stron naszego serwisu. Załóżmy, że znajduje się tam m.in. deklaracja tła obrazkowego stron. Jeśli teraz zechcemy tylko na jednej ze stron zastosować zwykłe tło, a jednocześnie na innych pozostawić nadal obrazkowe, może to uczynić na dwa sposoby:

1. Nie dołączać zewnętrznego arkusza do wybranej strony. Takie rozwiązanie nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni modyfikować również taką stronę. Nie dość, że jest to uciążliwe (zwłaszcza gdy istnieje więcej takich stron), to po jakimś czasie możemy po prostu zapomnieć o tej dodatkowej modyfikacji, co sprawi, że strona taka będzie różniła się wyglądem od innych.
2. W wewnętrznym arkuszu wybranej strony lub w stylu inline można umieścić przedstawione powyżej polecenie. Możemy wtedy bez przeszkód dołączyć zewnętrzny arkusz i nie musimy za każdym razem oddzielnie modyfikować takiej strony.

Jak widać drugi sposób jest znacznie korzystniejszy. Dodatkowo istnieją sytuacje, gdy pierwsza metoda jest wręcz niemożliwa do zastosowania, np. w przeglądarkach odsyłacze są zwykle domyślnie podkreślane. Jeśli chcemy z tego zrezygnować, musimy usunąć dekorację tekstu:

a:link, a:visited { text-decoration: none }

Dla wielu innych własności stylów istnieją analogicznie działające wartości - zwykle są to: none, normal, auto, transparent itp.

Polecenie background: none usuwa wszystkie własności dotyczące tła. Można również usunąć tylko wybrane, stosując odpowiednie polecenia dla każdej własności, którą chcemy usunąć (np. background-color: transparent; background-image: none itd.). Pozwala to np. usunąć tło obrazkowe, lecz pozostawić kolor tła. Działają one oczywiście nie tylko z zewnętrznym arkuszem, ale również z wewnętrznym - zgodnie z zasadami kaskadowości.

Przykład {background-color: transparent}

h4 { background-color: red }

<h4 style="background-color: transparent">To również jest tytuł rzędu czwartego, lecz mimo to nie ma już tła</h4>

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak zmienić kolor tła dowolnego elementu?

selektor { background-color: kolor }

Zobacz więcej...

Jak ustawić tło graficzne (obrazek, zdjęcie) pod dowolnym elementem? Jak ustalić rozmiary obrazka w tle?

selektor { background-image: url(ścieżka dostępu do obrazka) }

selektor { background-image: url(ścieżka dostępu do obrazka 1), url(ścieżka dostępu do obrazka 2),... }

Zobacz więcej...

W jaki sposób zapobiec powielaniu grafiki wstawionej w tle albo powielić ją tylko w jednym kierunku (poziomo lub pionowo)?

selektor { background-repeat: powtarzanie }

selektor { background-repeat: powtarzanie obrazka 1, powtarzanie obrazka 2,... }

Zobacz więcej...

Jak ustawić obrazek (grafikę, zdjęcie) w tle w określonej pozycji?

selektor { background-position: pozycja }

selektor { background-position: pozycja obrazka 1, pozycja obrazka 2,... }

Zobacz więcej...

Jak zrobić tło graficzne (obrazek, zdjęcie), które nie przesuwa się przy przewijaniu strony?

selektor { background-attachment: zaczepienie }

selektor { background-attachment: zaczepienie obrazka 1, zaczepienie obrazka 2,... }

Zobacz więcej...

W jaki sposób usunąć tło spod wewnętrznych marginesów elementu, ale wyświetlić je pod treścią?

selektor { background-clip: przycinanie }

selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... }

Zobacz więcej...

W jaki sposób określić pozycję obrazka tła, względem której będą liczone wszelkie przesunięcia?

selektor { background-origin: początek }

selektor { background-origin: początek obrazka 1, początek obrazka 2,... }

Zobacz więcej...

W jaki sposób przeskalować obrazek wstawiony w tle, tak żeby pasował idealnie?

selektor { background-size: rozmiary }

selektor { background-size: rozmiary obrazka 1, rozmiary obrazka 2,... }

Zobacz więcej...

Jak można najłatwiej ustawić kilka własności tła w jednym poleceniu?

selektor { background: wartości atrybutów }

selektor { background: wartości atrybutów obrazka 1, wartości atrybutów obrazka 2... }

Zobacz więcej...

Jak wypełnić tło płynnym przejściem kilku kolorów w postaci gradientu?

selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }

selektor { background: repeating-linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) }

Zobacz więcej...

Jak wypełnić tło płynnym przejściem kilku kolorów, wywołując efekt trójwymiarowej kuli lub oświetlenia latarki?

selektor { background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) }

selektor { background: repeating-radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) }

Zobacz więcej...

Jak usunąć wcześniej dodane tło?

selektor { background: none }

Zobacz więcej...