Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

Obrazy tła HTML


Obraz tła można określić dla prawie każdego elementu HTML.


Obraz tła w elemencie HTML

Aby dodać obraz tła do elementu HTML, użyj styleatrybutu HTML i właściwości CSS background-image:

Przykład

Dodaj obraz tła do elementu HTML:

<div style="background-image: url('img_girl.jpg');">

Możesz również określić obraz tła w <style> elemencie, w <head> sekcji:

Przykład

Określ obraz tła w <style> elemencie:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>

Obraz tła na stronie

Jeśli chcesz, aby cała strona miała obraz tła, musisz określić obraz tła na <body>elemencie:

Przykład

Dodaj obraz tła dla całej strony:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

powtarzanie tła

Jeśli obraz tła jest mniejszy niż element, obraz będzie się powtarzał w poziomie i w pionie, aż dojdzie do końca elementu:

Przykład

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

Aby uniknąć powtarzania się obrazu tła, ustaw background-repeatwłaściwość na no-repeat.

Przykład

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>

Okładka w tle

Jeśli chcesz, aby obraz tła obejmował cały element, możesz ustawić background-sizewłaściwość na cover.

Ponadto, aby mieć pewność, że cały element jest zawsze zakryty, ustaw background-attachmentwłaściwość nafixed:

W ten sposób obraz tła pokryje cały element, bez rozciągania (obraz zachowa oryginalne proporcje):

Przykład

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

Rozciąganie tła

Jeśli chcesz, aby obraz tła był rozciągnięty tak, aby pasował do całego elementu, możesz ustawić background-sizewłaściwość na 100% 100%:

Spróbuj zmienić rozmiar okna przeglądarki, a zobaczysz, że obraz się rozciągnie, ale zawsze zakryje cały element.

Przykład

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Dowiedz się więcej o CSS

Z powyższych przykładów nauczyłeś się, że obrazy tła można stylizować za pomocą właściwości tła CSS.

Aby dowiedzieć się więcej o właściwościach tła CSS, zapoznaj się z naszym samouczkiem dotyczącym tła CSS .