Kurs HTML

Wprowadzenie: Tło z obrazkiem

Oprócz jednolitego koloru, CSS pozwala używać obrazów jako tła dla elementów. Służy do tego właściwość background-image. Obraz tła jest rysowany **na wierzchu** koloru tła (background-color), ale pod treścią elementu.

Najczęściej obraz tła definiuje się za pomocą funkcji url(), która wskazuje ścieżkę do pliku graficznego.

Funkcja url()

Funkcja url() przyjmuje jako argument ścieżkę do pliku obrazu. Ścieżka może być:

• Relatywna: Względem lokalizacji pliku CSS, np. url("../images/tlo.jpg"), url("ikony/logo.png").
• Absolutna: Pełny adres URL do obrazu w internecie, np. url("https://example.com/images/background.png").
• Absolutna względem roota strony: Zaczynająca się od ukośnika, np. url("/assets/images/hero.jpg").

Ścieżkę można (ale nie trzeba) umieścić w cudzysłowach (") lub apostrofach (').

<div class="box image-bg-example">
  Ten div ma obrazek jako tło.
</div>Kopiuj

.box {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  padding: 15px;
  margin-bottom: 10px;
  color: white; /* Zmieńmy kolor tekstu dla kontrastu */
  text-shadow: 1px 1px 2px black; /* Cień dla lepszej czytelności */
}

.image-bg-example {
  background-image: url("../images/przykladowe-tlo.jpg"); /* Ścieżka relatywna */
  background-color: #eee; /* Kolor tła widoczny, jeśli obraz się nie załaduje lub jest przezroczysty */
}
/* Zakładamy, że obrazek przykladowe-tlo.jpg znajduje się w katalogu images */
/* jeden poziom wyżej niż plik CSS */Kopiuj

Ważne: Domyślnie, jeśli obraz tła jest mniejszy niż element, będzie on **powtarzany (kafelkowany)**, aby wypełnić całą dostępną przestrzeń. Kontrolę nad powtarzaniem omówimy w następnej lekcji (background-repeat).

Brak obrazu (none)

Właściwość background-image może również przyjąć wartość none. Jest to wartość domyślna i oznacza brak obrazu tła.

.no-image-bg {
  background-image: none; /* Jawne ustawienie braku obrazu */
}Kopiuj

Użycie none jest przydatne, gdy chcemy nadpisać obraz tła odziedziczony z innego stylu lub zresetować go w ramach właściwości zbiorczej background.

Gradienty jako background-image

Jak wspomniano wcześniej, gradienty CSS (liniowe i radialne) są również traktowane jako typ obrazu i ustawia się je za pomocą background-image.

.gradient-bg {
  background-image: linear-gradient(to right, red, blue); /* Gradient od czerwonego do niebieskiego */
  height: 100px;
  border: 1px solid black;
}Kopiuj

Gradienty omówimy szczegółowo w osobnym rozdziale.

Wiele obrazów tła

CSS pozwala na zdefiniowanie **wielu obrazów tła** dla jednego elementu, oddzielając je przecinkami. Obrazy te tworzą warstwy, gdzie pierwszy zdefiniowany obraz znajduje się **na samej górze** (najbliżej użytkownika), a kolejne pod nim.

Można mieszać obrazy z plików url() oraz gradienty.

<div class="multi-bg-example">Wiele Tł</div>Kopiuj

.multi-bg-example {
  width: 400px;
  height: 250px;
  border: 1px solid black;
  color: yellow;
  font-size: 2em;
  text-align: center;
  line-height: 250px;

  background-image: 
    url("../images/logo.png"), /* Warstwa górna - logo */
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), /* Warstwa środkowa - przyciemnienie */
    url("../images/tlo-tekstura.jpg"); /* Warstwa dolna - tekstura */

  /* Dla każdego obrazu można (i często trzeba) zdefiniować inne właściwości, */
  /* np. pozycję, powtarzanie, rozmiar, również oddzielając je przecinkami. */
  /* Omówimy to w kolejnych lekcjach. */
  background-repeat: no-repeat, no-repeat, repeat; 
  background-position: center, center, center;
  background-size: auto, cover, auto;

  background-color: #333; /* Kolor tła pod wszystkimi obrazami */
}Kopiuj

W tym przykładzie, na samym spodzie jest kolor #333. Nad nim jest powtarzająca się tekstura (tlo-tekstura.jpg). Nad teksturą jest półprzezroczysty czarny gradient, który ją przyciemnia. Na samej górze znajduje się niepowtarzające się logo (logo.png).