CSS background-image

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

CSS background-image

Właściwość background-image służy do ustawiania obrazu jako tła elementu HTML. Nie wstawia ona grafiki jako osobnego elementu strony, tylko wyświetla ją w tle wybranego elementu.

Składnia

p {
  background-image: url('rysunek.jpg');
}

Taki zapis oznacza, że obraz rysunek.jpg zostanie ustawiony jako tło każdego elementu <p>, czyli każdego akapitu.

Ważne zasady

  • background-image działa na elemencie wskazanym przez selektor CSS.
  • Obraz jest tłem, a nie znacznikiem <img>.
  • Domyślnie tło może się powtarzać, jeśli obraz jest mniejszy niż element.
  • Aby tło się nie powtarzało, używa się background-repeat: no-repeat;.

Przykład

p {
  background-image: url('tlo.png');
  background-repeat: no-repeat;
}

W tym przykładzie każdy akapit otrzyma obraz tlo.png jako tło, ale grafika nie będzie powielana.

Typowy błąd egzaminacyjny

Jeżeli w CSS zapisano:

p {
  background-image: url('rysunek.jpg');
}

nie oznacza to tła całej strony. Tło całej strony ustawiono by najczęściej dla selektora body. Selektor p dotyczy tylko akapitów.