# Hoe u HTML-achtergronden kunt aanpassen met kleuren of afbeeldingen 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. Tip Meer informatie over de mogelijkheden van de HTML-stijltag vindt u in ons artikel over dit onderwerp. ### 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: ```html ``` In het volgende voorbeeld gebruiken we een hexadecimale kleurcode om lichtblauw als achtergrondkleur te specificeren: ```html background-example

Here’s your heading

Here’s your website content.

``` Zo ziet het eruit: [![Afbeelding: HMTL background: Colour example](https://www.ionos.com/nl-be/digitalguide/fileadmin/_processed_/1/5/csm_html-color-background-example_fa19e51324.webp "HMTL background: Colour example")](https://www.ionos.com/nl-be/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-color-background-example.png) 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 `

` koppen en `

` tekstsecties: ```html background-example

The background of this headline is set to DodgerBlue.

This background is set to DarkTurquoise.

``` [![Afbeelding: Example: Three different coloured HTML backgrounds](https://www.ionos.com/nl-be/digitalguide/fileadmin/_processed_/b/1/csm_html-background-example-2_a5a13bd28c.webp "Example: Three different coloured HTML backgrounds")](https://www.ionos.com/nl-be/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-background-example-2.png) 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 background-example

Here’s your heading

Here’s your website content.

``` 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. This is a markdown version of: [https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/html-achtergronden/](https://www.ionos.com/nl-be/digitalguide/websites/webontwikkeling/html-achtergronden/) for AI/LLM consumption.