Tło obrazkowe {background-image}
Jak ustawić tło graficzne (obrazek, zdjęcie) pod dowolnym elementem? Jak ustalić rozmiary obrazka w tle?
Tło obrazkowe {background-image}
selektor { background-image: url(ścieżka dostępu do obrazka) }Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek.
Ś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ć 🙁
Dla zainteresowanych
Jeśli chcesz poznać więcej możliwości wstawiania tła obrazkowego, zobacz rozdziały: Powtarzanie tła obrazkowego, Zaczepienie tła obrazkowego, Pozycja tła obrazkowego, Rozmiary tła obrazkowego, Pozycja początkowa tła obrazkowego, Przycinanie tła obrazkowego. Natomiast aby ułatwić sobie definiowanie wielu własności tła jednocześnie, zapoznaj się z rozdziałem: Atrybuty mieszane tła.
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...
Pytania i odpowiedzi {background-image}
Jak ustawić obrazek jako tło w CSS?
Aby ustawić obrazek jako tło w CSS, można użyć właściwości background-image i podać ścieżkę dostępu do obrazka jako wartość. Na przykład: "background-image: url('sciezka/do/obrazka.jpg')".
Jak dodać tło do zdjęcia?
Aby dodać tło do zdjęcia z elementami przezroczystymi w CSS, można jednocześnie użyć właściwości background-image do ustawienia obrazka jako tła oraz background-color do określenia koloru tła. Na przykład, jeśli obrazek ma format GIF lub PNG z elementami przezroczystymi i chcesz dodać kolor tła, możesz użyć: "background-image: url('sciezka/do/zdjecia.png'); background-color: #EFEFEF", gdzie #EFEFEF to wybrany kolor tła. Takiego efektu nie można uzyskać ze zdjęciem w formacie JPG, ponieważ nie obsługuje on przezroczystości.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
background-image: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
background-image: none | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
background-image: wartość /* multiple backgrounds */ | 1 2008-12-11 | 3.6 2010-01-21 | 12 2015-07-29 | 10.5 2010-03-02 | 1.3 2005-04-15 |
