HTML Achtergrond

Een goede achtergrond maakt de site er speciaal uitzien.

Voorbeelden

Goede combinatie van achtergrondkleur en tekstkleur
Een voorbeeld van een goede combinatie van achtergrondkleur en tekstkleur, waardoor het lezen van de tekst op de pagina gemakkelijk wordt.
Slechte combinatie van achtergrondkleur en tekstkleur
Een voorbeeld van een slechte combinatie van achtergrondkleur en tekstkleur, waardoor het lezen van de tekst op de pagina moeilijk wordt.

(Meer voorbeelden kunnen worden gevonden aan het einde van deze pagina)

Achtergrond (Backgrounds)

<body> Bevat twee tags voor het configureren van de achtergrond. De achtergrond kan een kleur of een afbeelding zijn.

Achtergrondkleur (Bgcolor)

De achtergrondkleur-eigenschap stelt de achtergrond in op een bepaalde kleur. De waarde kan een hexadecimaal getal, een RGB-waarde of een kleurnaam zijn.

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

Deze code zet de achtergrondkleur in op zwart.

Achtergrond (Background)

De achtergrond-eigenschappen stellen de achtergrond in op een afbeelding. De waarde van de eigenschap is de URL van de afbeelding. Als de afbeelding kleiner is dan het browservenster, wordt de afbeelding over het hele browservenster gekopieerd.

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

De URL kan een relatieve adres zijn, zoals in de eerste regel van de code. Het kan ook een absoluut adres zijn, zoals in de tweede regel van de code.

Tip:Als je van plan bent om achtergrondafbeeldingen te gebruiken, moet je de volgende punten onthouden:

  • Verhoogt de achtergrondafbeelding de laadtijd van de pagina? Tip: bestanden van afbeeldingen mogen niet groter zijn dan 10k.
  • Past de achtergrondafbeelding goed bij andere afbeeldingen op de pagina?
  • Past de achtergrondafbeelding goed bij de tekstkleur op de pagina?
  • Ziet de afbeelding er nog goed uit nadat deze over de pagina is getiled?
  • Is de aandacht voor de tekst overrompeld door de achtergrondafbeelding?

Basisvoorschriften - nuttige tips:

De <body>-tag's achtergrondkleur (bgcolor), achtergrond (background) en tekst (text) eigenschappen zijn in de nieuwste HTML-standaarden (HTML4 en XHTML) afgekeurd. W3C heeft deze eigenschappen verwijderd uit hun aanbevolen standaarden.

Gebruik CSS (Cascading Style Sheets) om de lay-out en weergave-eigenschappen van HTML-elementen te definiëren.

Meer voorbeelden

Sterke achtergrondafbeeldingen
Voorbeelden van achtergrondafbeeldingen en tekstkleuren die het lezen van de paginatexten gemakkelijk maken.
Sterke achtergrondafbeeldingen 2
Een ander voorbeeld van achtergrondafbeeldingen en tekstkleuren die het lezen van de paginatexten gemakkelijk maken.
Onbruikbare achtergrondafbeeldingen
Voorbeelden van achtergrondafbeeldingen en tekstkleuren die het lezen van de paginatexten moeilijk maken.