HTML-achtergronden kunnen worden gemaakt met kleurwaarden of een afbeeldingsbestand. Door de juiste achtergrond te kiezen, kunt u het ontwerp van uw website verbeteren en tegelijkertijd ervoor zorgen dat uw inhoud duidelijk en gemakkelijk leesbaar blijft.

Wat zijn HTML-achtergronden?

Het gebied achter de inhoud van een webpagina wordt de HTML-achtergrond genoemd. Deze achtergronden kunnen worden ingesteld bij het maken van een pagina in HTML. Ze kunnen ook later naar behoefte worden gewijzigd. Standaard zijn HTML-achtergronden wit. Het wijzigen hiervan wordt niet alleen aanbevolen om het ontwerp van een website te verbeteren, maar ook om de zichtbaarheid van de inhoud te verbeteren.

Hoe kan een HTML-achtergrond worden gewijzigd?

Er zijn twee manieren om HTML-achtergronden te ontwerpen:

  • door een kleurwaarde toe te passen
  • door een afbeelding of een kleurverloop te gebruiken

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

HTML-achtergronden definiëren op basis van kleurwaarde

Om de kleur van een HTML-achtergrond te wijzigen, gebruikt u het style -attribuut en de background-color of bgcolor eigenschap. Er zijn drie verschillende opties om de kleurwaarde op te geven:

  • Kleurnaam: U kunt de gewenste kleur instellen door simpelweg de naam ervan te gebruiken. Naast standaardkleuren zoals red, yellow of green zijn ook speciale kleuren zoals lightblue of deepskyblue mogelijk. Bij het specificeren van de kleur maakt het niet uit of u hoofdletters of kleine letters gebruikt.
  • Hex-kleurcode: U kunt kleuren ook specificeren met behulp van hun zescijferige hexadecimale nummer. Dit bestaat uit drie paren die zijn samengesteld 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 bijvoorbeeld 0000ff zijn.
  • RGB-waarde: U kunt ook de RGB-waarde gebruiken, die ook de basis vormt voor de hexadecimale kleurcode. De waarden variëren van 0 tot 255 en komen overeen met de kleuren rood, groen en blauw. Blauw zou bijvoorbeeld RGB (0, 0, 255) zijn.

De syntaxis die u gebruikt om de gewenste kleur voor uw HTML-achtergronden te definiëren, ziet er als volgt uit:

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

In het volgende voorbeeld gebruiken we een hexadecimale kleurcode om lichtblauw als achtergrondkleur te specificeren:

<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 background with the hex code ‘#BFEFFF’.

Indien nodig kunt u ook afzonderlijk kleuren voor HTML-achtergronden definiëren voor afzonderlijke 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 verschillende kleuren zijn ingesteld voor de algehele achtergrond, evenals voor de achtergronden van <h2> koppen en <p> tekstsecties:

<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 background with three different colours.

Afbeeldingen instellen als HTML-achtergronden

Om afbeeldingen of grafische elementen als HTML-achtergrond te kunnen gebruiken, moeten ze worden opgeslagen in de afbeeldingsformaten JPG, PNG, SVG, WebP of GIF. Het volgende voorbeeld toont de juiste code voor het integreren van een afbeelding als achtergrond. Het pad naar de afbeelding moet individueel 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 afbeelding gebruikt, moet u altijd rekening houden met de leesbaarheid van de inhoud. Door aanvullende parameters op te geven, kunt u de positie van de afbeelding of grafische weergave aanpassen om ervoor te zorgen dat de tekst goed te onderscheiden is van de achtergrond.

Ga naar hoofdmenu