Tło HTML

Dobrze dobrane tło sprawia, że strona wygląda szczególnie dobrze.

Przykład

Dobrze dopasowane tło i kolory
Przykład dobrego dopasowania koloru tła i tekstu, co ułatwia czytanie tekstu na stronie.
Kiepskie dopasowanie koloru tła i tekstu
Przykład kiepskiego dopasowania koloru tła i tekstu, co utrudnia czytanie tekstu na stronie.

(Więcej przykładów można znaleźć w dolnej części tej strony)

Tło (Backgrounds)

<body> Posiada dwa znaczniki konfigurujące tło. Tło może być kolorem lub obrazem.

Kolor tła (Bgcolor)

Atrybut koloru tła ustawia tło na określony kolor. Wartością może być liczba szesnastkowa, wartość RGB lub nazwa koloru.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Powyższy kod ustawia kolor tła na czarny.

Tło (Background)

Atrybuty tła ustawiają tło na obraz. Wartością atrybutu jest URL obrazu. Jeśli rozmiar obrazu jest mniejszy niż okno przeglądarki, obraz zostanie powtarzany na całym oknie przeglądarki.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

URL może być adresem względowym, takim jak w pierwszym wierszu kodu. Może to również być adres absolutny, takim jak w drugim wierszu kodu.

Podpowiedź:Jeśli planujesz używać tła obrazu, powinieneś pamiętać o kilku rzeczach:

  • Czy tło obrazu zwiększa czas ładowania strony? Podpowiedź: plik obrazu nie powinien przekraczać 10k.
  • Czy tło obrazu pasuje dobrze do innych obrazów na stronie?
  • Czy tło obrazu pasuje dobrze do koloru tekstu na stronie?
  • Czy obraz, który jest powtarzany na stronie, wygląda dobrze?
  • Czy tło obrazu przytłacza uwagę tekstu?

Podstawowe uwagi - przydatne wskazówki:

Atrybuty tła (bgcolor), tło (background) i tekst (text) w etykiecie <body> w najnowszych standardach HTML (HTML4 i XHTML) zostały już przestarzałe. W3C usunęło te atrybuty ze swoich rekomendacji.

Powinno się używać kaskadowych arkuszy stylów (CSS) do definiowania układu i właściwości wyświetlania elementów HTML.

Więcej przykładów

Silne tło obrazu
Przykłady, w których tło obrazu i kolor tekstu sprawiają, że tekst na stronie jest łatwy do odczytania.
Silne tło obrazu 2
Kolejny przykład tła obrazu i koloru tekstu, które sprawiają, że tekst na stronie jest łatwy do odczytania.
Tło obrazu o złej dostępności
Przykłady, w których tło obrazu i kolor tekstu sprawiają, że tekst na stronie jest trudny do odczytania.