background
Skrót ustawiający wszystkie właściwości tła w jednej deklaracji.
- Wartość domyślna
zgodnie z właściwościami składowymi- Dziedziczona
- Nie
- Animowalna
- tak, tak jak właściwości składowe
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.background = "#111 url(img.webp) center / cover no-repeat"
Przykład
#.banner {
background:
radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.35), transparent 60%),
#0b0b12;
}<section style="padding: 24px; border-radius: 12px; background: radial-gradient(circle at 80% 20%, rgba(167,139,250,.35), transparent 60%), #0b0b12; border: 1px solid #262626;">
<strong>Nowy świat: Nordheim</strong>
<p style="margin: 6px 0 0; color: #a3a3a3;">Svelte 5 i SvelteKit w klimacie wikingów.</p>
</section>Definicja i zastosowanie
#Właściwość background łączy kolor, obraz, pozycję, rozmiar, powtarzanie, przyczepienie i obszary tła. Najczęściej wygląda tak: background: #111 url(img.webp) center / cover no-repeat.
Rozmiar podaje się zawsze po pozycji, oddzielony ukośnikiem. Kolor może pojawić się tylko w ostatniej warstwie, bo leży pod wszystkimi obrazami.
Skrót resetuje pominięte składniki do wartości domyślnych. Jeśli wcześniej ustawiłeś background-size, a potem napiszesz background: red, rozmiar wróci do auto.
Składnia
#background: <kolor>? <obraz>? <pozycja> [ / <rozmiar> ]? <powtarzanie>? <przyczepienie>? <obszar>?;Wartości
#- Sam kolor tła.
- Gradient jako jedyna warstwa.
url(…) center / cover no-repeat
Zdjęcie wyśrodkowane i pokrywające całość.- Gradient na zdjęciu i kolor zapasowy pod spodem.
Wartości w praktyce
##0ea5e9
.demo { background: #0ea5e9; }linear-gradient(…)
.demo { background: linear-gradient(135deg, #10b981, #0ea5e9); }url(…) center / cover no-repeat
.demo { background: url("/collections/covers/jak-zostac-programista.webp") center / cover no-repeat; }dwie warstwy i kolor
.demo { background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), #111 url("/collections/covers/jak-zostac-programista.webp") center / cover no-repeat; }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
#- Nie mieszaj skrótu z właściwościami składowymi w różnych regułach. Skrót nadpisze to, co ustawiłeś wcześniej.
- Pamiętaj o ukośniku przed rozmiarem:
center / cover, a niecenter cover.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.