Własność CSS background-image

Własność CSS background-image umożliwia ustawienie jednego lub większej liczby obrazów graficznych w tle elementu.

Jeśli tych obrazów jest więcej niż jeden, to tworzą one kolejne warstwy, z których najbliższa użytkownikowi (na wierzchu) jest ta, która została zdefiniowana jako pierwsza. Na samym spodzie znajduje się warstwa koloru tła (definiowana za pomocą własności background-color), jeśli zostanie on określony.

Należy pamiętać, że własność background-image wstawia obrazy w tle elementów, a więc w obszarze, który z definicji nie stanowi najważniejszej części treści. Dlatego obrazy te nie powinny zawierać żadnych istotnych informacji, a jedynie stanowić detal dekoracyjny, którego brak nie byłby żadną stratą dla użytkownika.

Jest to istotne z punktu widzenia użytkowników z niepełnosprawnościami, którzy posługują się na przykład czytnikami ekranu – te programy nie mają dostępu do treści widocznej na obrazach.

Ważne dla znaczenia treści grafiki powinno się wstawiać na stronę nie za pomocą własności background-image, tylko za pomocą elementu HTML img.

Ponadto wraz z obrazem lub obrazami tła zawsze należy zdefiniować także kolor tła, aby zapewnić wystarczający kontrast dla treści na wypadek, gdyby obrazy z jakiegoś powodu nie zostały wczytane przez przeglądarkę.

Przykład

Poniżej znajduje się prosty przykład użycia własności background-image do wstawienia obrazu w tle elementu article:

article {
  background-image: url("obraz.png");
}

Ta reguła wstawia obraz o nazwie obraz.png w tle wszystkich elementów article na stronie.

Wartości i składnia

Własność background-image przyjmuje dwa typy wartości:

• Obraz graficzny zdefiniowany w dowolny sposób obsługiwany w CSS – w tle elementu można ustawić zarówno dowolny obraz rastrowy, np. PNG, JPG, czy WebP, jak również gradient albo obraz w formacie wektorowym, np. SVG.
• Słowo kluczowe none – brak obrazu.

Wartością własności background-image może być lista wartości rozdzielanych przecinkami. Każda z wartości na tej liście definiuje osobną warstwę. Dotyczy to nawet słowa kluczowego none, które nie dodaje żadnego obrazu, ale tworzy kolejną warstwę na stosie.

Pozostałe własności tła, takie jak background-repeat, background-size czy background-position, określają inne właściwości obrazów wstawionych przez własność background-image i powinny mieć tyle samo wartości, co własność background-image. Jeśli mają ich za mało, to są one uzupełniane przez przeglądarkę przez cykliczne wykorzystanie dostępnych wartości, np.:

background-image: url("a.png"), url("b.png"), url("c.png"), url("d.png"), url("e.png");
background-position: top, right, bottom;

W tym przypadku własność background-position obrazowi a.png przypisze wartość top, obrazowi b.png – right, a obrazowi c.png – bottom. Na tym kończy się zasób wartości tej własności, więc dla kolejnych pozycji we własności background-image wartości z własności background-position będą pobierane od początku. W efekcie obrazowi d.png zostanie przypisana wartość top, a obrazowi e.png – wartość right. To samo dotyczy pozostałych własności dotyczących obrazu tła.

Jeśli wartości jest za dużo, to nadmiarowe pozycje zostają zignorowane.

Dodatkowe przykłady

Poniżej znajduje się parę dodatkowych przykładów użycia własności CSS background-image.

Gradient w tle elementu

Za pomocą własności background-image w tle elementu można ustawić dowolny typ gradientu obsługiwany przez CSS. W poniższym przykładzie w tle elementu section został ustawiony gradient stożkowy:

background-image: conic-gradient(red, green, blue);

Efekt:

Obraz SVG w tle elementu

Poniżej znajduje się przykład pokazujący, jak za pomocą własności background-image wstawić grafikę SVG w tle elementu:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='310' width='400'%3E %3Ccircle cx='70' cy='70' r='65' stroke='red' fill='lightpink' stroke-width='5'/%3E%3C/svg%3E");

Efekt:

Kilka obrazów w tle elementu

Aby wstawić kilka obrazów w tle elementu, należy zdefiniować listę ich definicji rozdzielanych przecinkami, np.:

background-image:
  url("filizanka.png"),
    
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='310' width='400'%3E %3Ccircle cx='190' cy='70' r='65' stroke='red' fill='lightpink' stroke-width='5'/%3E%3C/svg%3E"),
  
  linear-gradient(red, green, blue)
;

Efekt:

Jak widać, typy grafik można swobodnie mieszać i każdy z tych obrazów można kontrolować za pomocą pozostałych własności z grupy teł CSS.

Zastosowanie

Własność CSS background-image ma zastosowanie do wszystkich elementów HTML.

Podsumowanie