Dokumentacja CSS z przykładami: Obraz tła

Q: Jak dodać obraz tła w CSS?

Użyj na elemencie background-image: url("photo.jpg");. Ścieżka jest względna wobec pliku CSS (albo wobec strony w przypadku atrybutu style lub elementu ). Nadaj elementowi rozmiar, bo tło nigdy nie powiększa pustego elementu.

Q: Jak sprawić, żeby obraz tła pokrywał cały element?

Użyj background-size: cover; razem z background-position: center;. Obraz skaluje się tak, żeby w całości wypełnić pudełko z zachowaniem proporcji, a nadmiar zostaje przycięty.

Q: Czym różni się cover od contain?

cover wypełnia całe pudełko i przycina to, co się nie mieści. contain pokazuje cały obraz i zostawia puste miejsce po dwóch stronach, gdy proporcje się różnią.

Q: Jak wyłączyć powtarzanie obrazu tła?

Dodaj background-repeat: no-repeat;. Domyślnie obraz tła powtarza się w obu kierunkach, żeby wypełnić element.

Q: Dlaczego mój obraz tła się nie wyświetla?

Najczęstsze przyczyny to zła ścieżka w url() (jest względna wobec pliku CSS), element bez wysokości, bo nie ma treści, albo późniejszy skrót background, który zresetował obraz.

Jak dodać obraz tła

background-image maluje obraz za treścią, paddingiem i obramowaniem elementu. Domyślnie zaczyna w lewym górnym rogu obszaru paddingu, zachowuje naturalny rozmiar i powtarza się, żeby wypełnić pudełko:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

W prawdziwym projekcie url() wskazuje plik: url("images/hero.jpg"). Ścieżka jest względna wobec arkusza stylów, w którym się znajduje (albo wobec strony w przypadku elementu <style>). Przykłady na tej stronie używają małych obrazów SVG zapisanych bezpośrednio jako adresy data:, więc działają wszędzie.

Dwie rzeczy warto wiedzieć od początku:

Tło nie nadaje elementowi rozmiaru. Pusty div z obrazem tła ma 0px wysokości. Daj mu treść, padding, height albo aspect-ratio.
Obraz tła to dekoracja. Czytniki ekranu go pomijają i nie ma on tekstu alternatywnego. Obraz, który niesie znaczenie, powinien być elementem <img>.

background-size: cover, contain i długości

background-size skaluje obraz. Oba słowa kluczowe zachowują jego proporcje:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

Obraz jest dwa razy szerszy niż wyższy, a każde pudełko jest kwadratem.

Wartość	Wynik
`auto` (domyślnie)	Własny rozmiar obrazu
`cover`	Skaluje, aż pudełko jest całkowicie wypełnione; nadmiar zostaje przycięty
`contain`	Skaluje, aż cały obraz się zmieści; po dwóch stronach zostają szare pasy
`200px`	Szerokość 200px, wysokość proporcjonalna
`50% auto`	Połowa szerokości pudełka, wysokość proporcjonalna
`100% 100%`	Dokładnie rozmiar pudełka; zniekształca obraz, gdy proporcje się różnią

cover to typowy wybór dla dużych banerów i kart. contain sprawdza się przy logo i ilustracjach, których nie wolno przyciąć.

background-position i background-repeat

background-position umieszcza obraz w pudełku za pomocą słów kluczowych (top, center, bottom, left, right), procentów albo długości. background-repeat steruje powtarzaniem. Wypróbuj kilka wartości:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Wypróbuj pozycje top right, bottom 10px right 20px i 25% 75% oraz wartości powtarzania repeat-x, repeat-y, space (kafelki z odstępami, żaden nie jest przycięty) i round (kafelki przeskalowane tak, żeby zmieściła się ich pełna liczba).

Warstwy: kilka teł i tekst na obrazie

background-image przyjmuje listę rozdzieloną przecinkami. Pierwsza warstwa jest rysowana na wierzchu. Typowe zastosowanie to półprzezroczysty gradient na zdjęciu, dzięki któremu biały tekst pozostaje czytelny:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio nadaje pustemu pudełku wysokość, a background-size: cover działa na obie warstwy. Więcej przepisów na gradienty znajdziesz na stronie gradienty CSS.

Skrót background

background ustawia wszystkie właściwości tła w jednej linii. Rozmiar musi stać zaraz po pozycji, oddzielony ukośnikiem, a kolor trafia do ostatniej warstwy:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

Kolor zastępczy widać, zanim obraz się załaduje, i gdy ładowanie się nie uda. Każda właściwość pominięta w skrócie wraca do wartości domyślnej, więc najpierw wpisz skrót, a po nim pojedyncze właściwości.

Inne właściwości tła

Właściwość	Co robi
`background-attachment: fixed`	Obraz stoi w miejscu podczas przewijania strony (ignorowane w Safari na iOS)
`background-origin`	Czy pozycja liczy się od krawędzi obramowania, paddingu czy treści
`background-clip`	Gdzie maluje się tło, w tym `text`, które wypełnia litery
`background-blend-mode`	Miesza warstwy ze sobą, na przykład `multiply`

Częste błędy

Zła ścieżka. url() w arkuszu stylów jest względny wobec pliku CSS, a nie strony HTML.
Pusty element. Nie ma wysokości, więc obraz nie ma gdzie się pokazać.
Brak no-repeat przy contain albo małym obrazie: obraz się powtarza.
Rozciąganie przez 100% 100%, gdy chodziło o cover.
Ważne obrazy jako tło. Do treści używaj <img> z tekstem alternatywnym; tła są niewidoczne dla czytników ekranu.
Brak cudzysłowów wokół adresu data:, który zawiera spacje albo cudzysłowy. Zawsze pisz url("...").

Najczęściej zadawane pytania

Jak dodać obraz tła w CSS?

Użyj na elemencie background-image: url("photo.jpg");. Ścieżka jest względna wobec pliku CSS (albo wobec strony w przypadku atrybutu style lub elementu <style>). Nadaj elementowi rozmiar, bo tło nigdy nie powiększa pustego elementu.

Jak sprawić, żeby obraz tła pokrywał cały element?

Użyj background-size: cover; razem z background-position: center;. Obraz skaluje się tak, żeby w całości wypełnić pudełko z zachowaniem proporcji, a nadmiar zostaje przycięty.

Czym różni się cover od contain?

cover wypełnia całe pudełko i przycina to, co się nie mieści. contain pokazuje cały obraz i zostawia puste miejsce po dwóch stronach, gdy proporcje się różnią.

Jak wyłączyć powtarzanie obrazu tła?

Dodaj background-repeat: no-repeat;. Domyślnie obraz tła powtarza się w obu kierunkach, żeby wypełnić element.

Dlaczego mój obraz tła się nie wyświetla?

Najczęstsze przyczyny to zła ścieżka w url() (jest względna wobec pliku CSS), element bez wysokości, bo nie ma treści, albo późniejszy skrót background, który zresetował obraz.

Powiązane zagadnienia