background-image
Ustawia obraz lub gradient jako tło elementu.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundImage = "linear-gradient(#000, #333)"
Przykład
#.hero {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent),
url("/img/hero.webp");
background-size: cover;
background-position: center;
}<section style="padding: 28px 20px; border-radius: 12px; color: #fff; background-image: linear-gradient(to right, rgba(0,0,0,.85), transparent), url('/collections/covers/jak-zostac-programista.webp'); background-size: cover; background-position: center;">
<h2 style="margin: 0">Zostań programistą</h2>
<p style="margin: 6px 0 0; max-width: 26ch;">Tekst na zdjęciu jest czytelny dzięki gradientowi.</p>
</section>Definicja i zastosowanie
#Właściwość background-image przyjmuje obraz przez url() albo gradient: linear-gradient(), radial-gradient() lub conic-gradient(). Gradienty to w CSS też obrazy, więc nie potrzebują żadnych plików.
Można podać kilka warstw oddzielonych przecinkami. Pierwsza na liście leży na wierzchu. To pozwala na przykład położyć półprzezroczysty gradient na zdjęciu, żeby tekst był na nim czytelny.
Obraz tła jest dekoracją: nie ma tekstu alternatywnego i czytniki ekranu go pomijają. Treść ważną dla zrozumienia strony wstawiaj jako <img>.
Składnia
#background-image: none | url(…) | <gradient> [, …]*;Wartości
#- Brak obrazu tła.
url("/collections/covers/jak-zostac-programista.webp")
url()
Zdjęcie jako tło.gradient liniowy
Płynne przejście między kolorami wzdłuż linii.gradient kołowy
Kolory rozchodzące się od środka.kilka warstw
Przyciemniający gradient na wierzchu i zdjęcie pod spodem.
Wartości w praktyce
#none
.demo { background-image: none; }url("/collections/covers/jak-zostac-programista.webp")
.demo { background-image: url("/collections/covers/jak-zostac-programista.webp"); }linear-gradient(…)
.demo { background-image: linear-gradient(135deg, #7c3aed, #0ea5e9); }radial-gradient(…)
.demo { background-image: radial-gradient(circle at 30% 30%, #f59e0b, #7c3aed 70%); }gradient + zdjęcie
.demo { background-image: linear-gradient(to top, rgba(0,0,0,.85), transparent), url("/collections/covers/jak-zostac-programista.webp"); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Tekst na zdjęciu zawsze zabezpiecz półprzezroczystą warstwą gradientu. Zdjęcia mają jasne i ciemne miejsca.
- Dla dużych obrazów tła używaj formatów WebP lub AVIF, są znacznie lżejsze od JPEG.
Powiązane hasła
#- background-sizeUstala rozmiar obrazu tła: pokrycie całości, zmieszczenie w całości albo konkretne wymiary.
- background-positionUstawia położenie obrazu tła w elemencie.
- background-repeatDecyduje, czy i jak obraz tła powtarza się, żeby wypełnić element.
- backgroundSkrót ustawiający wszystkie właściwości tła w jednej deklaracji.
- linear-gradient()Tworzy płynne przejście kolorów wzdłuż prostej linii. Używa się go jako obrazu, najczęściej w background lub background-image.
Widzisz błąd albo brakuje przykładu? Napisz do nas.