HTML-ach­ter­gron­den kunnen worden gemaakt met kleur­waar­den of een af­beel­dings­be­stand. Door de juiste ach­ter­grond te kiezen, kunt u het ontwerp van uw website ver­be­te­ren en te­ge­lij­ker­tijd ervoor zorgen dat uw inhoud duidelijk en ge­mak­ke­lijk leesbaar blijft.

Wat zijn HTML-ach­ter­gron­den?

Het gebied achter de inhoud van een webpagina wordt de HTML-ach­ter­grond genoemd. Deze ach­ter­gron­den kunnen worden ingesteld bij het maken van een pagina in HTML. Ze kunnen ook later naar behoefte worden gewijzigd. Standaard zijn HTML-ach­ter­gron­den wit. Het wijzigen hiervan wordt niet alleen aan­be­vo­len om het ontwerp van een website te ver­be­te­ren, maar ook om de zicht­baar­heid van de inhoud te ver­be­te­ren.

Hoe kan een HTML-ach­ter­grond worden gewijzigd?

Er zijn twee manieren om HTML-ach­ter­gron­den te ontwerpen:

  • door een kleur­waar­de toe te passen
  • door een af­beel­ding of een kleur­ver­loop te gebruiken

Deze waarden worden ingesteld via het HTML-attribuut style. In de volgende secties zullen we beide methoden met u doornemen.

HTML-ach­ter­gron­den de­fi­ni­ë­ren op basis van kleur­waar­de

Om de kleur van een HTML-ach­ter­grond te wijzigen, gebruikt u het style -attribuut en de background-color of bgcolor ei­gen­schap. Er zijn drie ver­schil­len­de opties om de kleur­waar­de op te geven:

  • Kleurnaam: U kunt de gewenste kleur instellen door simpelweg de naam ervan te gebruiken. Naast stan­daard­kleu­ren zoals red, yellow of green zijn ook speciale kleuren zoals lightblue of deepskyblue mogelijk. Bij het spe­ci­fi­ce­ren van de kleur maakt het niet uit of u hoofd­let­ters of kleine letters gebruikt.
  • Hex-kleurcode: U kunt kleuren ook spe­ci­fi­ce­ren met behulp van hun zes­cij­fe­ri­ge hexa­de­ci­ma­le nummer. Dit bestaat uit drie paren die zijn sa­men­ge­steld uit de cijfers 0 tot 9 en de letters a tot f. Het eerste paar staat voor de rode waarde, het tweede voor groen en het derde voor blauw, waarbij 00 de laagste waarde is en ff de hoogste. Blauw zou bij­voor­beeld 0000ff zijn.
  • RGB-waarde: U kunt ook de RGB-waarde gebruiken, die ook de basis vormt voor de hexa­de­ci­ma­le kleurcode. De waarden variëren van 0 tot 255 en komen overeen met de kleuren rood, groen en blauw. Blauw zou bij­voor­beeld RGB (0, 0, 255) zijn.

De syntaxis die u gebruikt om de gewenste kleur voor uw HTML-ach­ter­gron­den te de­fi­ni­ë­ren, ziet er als volgt uit:

<body style="background-color: value;">
html

In het volgende voorbeeld gebruiken we een hexa­de­ci­ma­le kleurcode om licht­blauw als ach­ter­grond­kleur te spe­ci­fi­ce­ren:

<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Zo ziet het eruit:

Afbeelding: HMTL background: Colour example
Sample HTML back­ground with the hex code ‘#BFEFFF’.

Indien nodig kunt u ook af­zon­der­lijk kleuren voor HTML-ach­ter­gron­den de­fi­ni­ë­ren voor af­zon­der­lij­ke secties van uw webpagina’s. Dit doet u met behulp van het style en de background-color. U kunt zien hoe dit werkt in het volgende voorbeeld, waarin ver­schil­len­de kleuren zijn ingesteld voor de algehele ach­ter­grond, evenals voor de ach­ter­gron­den van <h2> koppen en <p> tekst­sec­ties:

<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
</body>
</html>
html
Afbeelding: Example: Three different coloured HTML backgrounds
Example of an HTML back­ground with three different colours.

Af­beel­din­gen instellen als HTML-ach­ter­gron­den

Om af­beel­din­gen of grafische elementen als HTML-ach­ter­grond te kunnen gebruiken, moeten ze worden op­ge­sla­gen in de af­beel­dings­for­ma­ten JPG, PNG, SVG, WebP of GIF. Het volgende voorbeeld toont de juiste code voor het in­te­gre­ren van een af­beel­ding als ach­ter­grond. Het pad naar de af­beel­ding moet in­di­vi­du­eel worden aangepast:

<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

Wanneer u een af­beel­ding gebruikt, moet u altijd rekening houden met de lees­baar­heid van de inhoud. Door aan­vul­len­de pa­ra­me­ters op te geven, kunt u de positie van de af­beel­ding of grafische weergave aanpassen om ervoor te zorgen dat de tekst goed te on­der­schei­den is van de ach­ter­grond.

Ga naar hoofdmenu