De achtergrondkleur in HTML aanpassen

Om de achtergrond van een webpagina in HTML in te kunnen stellen, hoef je alleen maar een kleine verandering aan te brengen in het 'body'-element binnen de <style></style> tags. De stappen zijn afhankelijk van hoe je wilt dat je achtergrond eruit gaat zien. Leer hoe je de achtergrond van je website in kunt stellen als effen kleur, afbeelding, kleurovergang of kleuranimatie.

Methode 1

Methode 1 van 4:

Het instellen van een effen achtergrondkleur

Pdf downloaden

Vanaf HTML5 wordt het HTML-attribuut <bgcolor> niet langer ondersteund. De achtergrondkleur moet, evenals alle andere stijlaspecten van je pagina, ingesteld worden met CSS.^[1]XBron
2
Voeg de <style></style> tags toe aan je document. Alle stijlgegevens voor je pagina (waaronder de achtergrondkleur) horen binnen deze tags te worden gecodeerd. Heb je de <style> tags al aangegeven, dan kun je gewoon naar dat deel van het bestand scrollen.
```
<!DOCTYPE html><html><head><style></style></head></html>
```
3
Typ het "body"-element binnen de <style></style> tags. Alles dat je wijzigt aan het "body"-element in CSS, zal effect hebben op de gehele pagina.
```
<!DOCTYPE html><html><head><style>body { }</style></head><body></body></html>
```
4
Voeg de "background-color"-eigenschap toe aan het "body"-element. Binnen deze context zal alleen één spelling van "color" werken (dus niet: colour).
```
<!DOCTYPE html><html><head><style>body {    background-color: }</style></head><body></body></html>
```
5
Plaats de gewenste achtergrondkleur achter "background-color". Je kunt nu de naam van een kleur aangeven (green, blue, red, etc.), hexadecimale (hex) codes gebruiken (bijv. #000000 voor zwart, #ff0000 voor rood, etc.) of door het intypen van de RGB-waarde voor de kleur (zoals rgb(255,255,0) voor geel). Hieronder vind je een voorbeeld met hexadeximale codes, waarmee de achtergrond hetzelfde wordt als de banner van How.com.vn:
```
<!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}</style></head><body></body></html>
```
- Wit: #FFFFFF
- Lichtroze: #FFCCE6
- Gebrande sienna: #993300
- Indigo - #4B0082
- Violet - #EE82EE
- Bekijk de w3schools.com HTML Color Picker om de hex-codes van elke gewenste kleur te vinden.
6
Gebruik "background-color" voor het toepassen van achtergrondkleuren op andere elementen. Net zoals je het body-element hebt ingesteld, kun je background-color gebruiken voor het instellen van de achtergronden van andere elementen. Plaats die elementen gewoon binnen de <style></style> met de eigenschap background-color.^[2]XBron
```
<!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}h1 {    background-color: orange;}p {    background-color: rgb(255,0,0);}</style></head><body><h1>Deze header krijgt een oranje achtergrond</h1><p>Deze alinea krijgt een rode achtergrond</p></body></html>
```
Advertentie

Methode 2

Methode 2 van 4:

Een afbeelding als achtergrond gebruiken

Pdf downloaden

Veel mensen geven de voorkeur aan het gebruiken van een afbeelding als achtergrond voor hun website. Hiermee kun je een patroon, textuur, foto of elke andere afbeelding instellen als achtergrond. Vanaf HTML5 dienen alle achtergronden ingesteld te worden met CSS (Cascading Style Sheets) binnen de <style></style> tags.
2
Voeg de <style></style> tags toe aan je HTML-bestand. Alle stijlgegevens voor je pagina (waaronder de achtergrondkleur) hoort binnen deze tags aangegeven te worden. Heb je al <style> tags ingesteld, scroll dan naar dat deel van het bestand.
```
<!DOCTYPE html><html><head><style></style></head></html>
```
3
Typ het "body"-element binnen de <style></style> tags. Alles wat je wijzigt aan het "body"-element in CSS zal effect hebben op de hele pagina.
```
<!DOCTYPE html><html><head><style>body { }</style></head><body></body></html>
```
4
Voeg de eigenschap "background-image" toe aan het "body"-element. Wanneer je deze eigenschap toevoegt, heb je de bestandsnaam nodig van je afbeelding. Zorg dat de afbeelding in dezelfde map is opgeslagen als het html-bestand (of voeg het volledige pad naar het bestand toe aan je webserver).^[3]XBron
```
<!DOCTYPE html><html><head><style>body {    background-image: url("imagename.png");    background-color: #216fdb;}</style></head><body></body></html>
```
- Het is een goed idee om ook de code background-color toe te voegen, gewoon voor het geval de achtergrondafbeelding niet wil laden.
5
Breng lagen aan van meerdere afbeeldingen. Je kunt meerdere afbeeldingen op elkaar stapelen. Dit kan handig zijn als je afbeeldingen hebt met transparante achtergronden die elkaar aanvullen wanneer ze op elkaar liggen.
```
<!DOCTYPE html><html><head><style>body {    background-image: url("image1.png"), url("image2.gif");    background-color: #216fdb;}</style></head><body></body></html>
```
- De eerste afbeelding ligt bovenop. De tweede afbeelding ligt onder de eerste.
Advertentie

Methode 3

Methode 3 van 4:

Het maken van een achtergrond met een kleurverloop

Pdf downloaden

Als je op zoek bent naar iets dat wat meer gestileerd is dan een effen kleur, maar niet zo druk als een kleurenanimatie, probeer dan een kleurverloop als achtergrond. Kleurverlopen zijn kleuren die overgaan in andere klaren. Je kunt CSS gebruiken voor het maken en aanpassen van je kleurverloop. Voor je en kleurverloop gaat maken moet je voldoende kennis opdoen van de basisprincipes van het opmaken van een webpagina met CSS.
2
Begrijp de standaardsyntax. Bij het maken van een kleurverloop zijn er twee stukjes informatie die je nodig zult hebben: het beginpunt en de beginhoek, en de kleuren waartussen de overgang plaats zal vinden. Je kunt meerdere kleuren selecteren die allemaal in elkaar overlopen, en je kunt een richting of een hoek aangeven voor het kleurverloop.^[4]XBron
```
background: linear-gradient(richting/hoek, kleur1, kleur2, kleur3, etc.);
```

How.com.vn Nederlands: Step 3 Maak een verticale kleurverloop.

Als je geen richting aangeeft, dan verloopt de kleur van boven naar beneden. Verschillende browsers hebben verschillende versies van het kleurverloop-functie, dus zul je verschillende versies van de code toe moeten voegen.

<!DOCTYPE html><html><head><style>html {    min-height: 100%; /* Dit is vereist om er zeker van te zijn dat het kleurverloop zich uitstrekt over de hele pagina */}body {    background: -webkit-linear-gradient(#216fdb, #C9DCB9); /* Chrome 10+, Safari 5.1+ */    background: -o-linear-gradient(#216fdb, #C9DCB9); /* Opera 11.1+ */    background: -moz-linear-gradient(#216fdb, #C9DCB9); /* Firefox 3.6+ */    background: linear-gradient(#216fdb, #C9DCB9); /* Standaard syntax (moet als laatste) */    background-color: #216fdb; /* Het is een goed idee om een achtergrondkleur in te stellen, voor het geval het kleurverloop niet laadt */}</style></head><body></body></html>

How.com.vn Nederlands: Step 4 Maak een kleurverloop met een richting.

Het toevoegen van een richting aan het kleurverloop geeft je de mogelijkheid om de manier waarop de kleur verschuift aan te passen. Merk op dat verschillende browsers op verschillende manier de richtingen zullen interpreteren. Ze zullen allemaal hetzelfde kleurverloop laten zien.^[5]XBron

<!DOCTYPE html><html><head><style>html {    min-height: 100%;}body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9); /* van links naar rechts */    background: -o-linear-gradient(right, #216fdb, #C9DCB9); /* einde aan de rechterkant */    background: -moz-linear-gradient(right, #216fdb, #C9DCB9); /* einde aan de rechterkant */    background: linear-gradient(to right, #216fdb, #C9DCB9); /* beweegt naar de rechterkant */    background-color: #216fdb; /* het is een goed idee om een achtergrondkleur in te stellen, voor het geval het kleurverloop niet wil laden */}</style></head><body></body></html>

5
Gebruik andere eigenschappen om het kleurverloop aan te passen. Je kunt nog veel meer doen met kleurverlopen.
- Je kunt bijvoorbeeld niet alleen meer dan twee kleuren gebruiken, maar ook achter elk een percentage plaatsen. Hiermee kun je aangeven hoeveel ruimte elk kleurensegment gaat krijgen.
  background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
- Voeg transparantie toe aan de kleuren. Hiermee kun je de kleuren laten vervagen. Gebruik dezelfde kleur om van de kleur naar niets te vervagen. Je zult de functie rgba() moeten gebruiken om de kleur aan te geven. De eindwaarde bepaalt de mate van transparantie: 0 voor opaak en 1 voor transparant.
  background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
Advertentie

Methode 4

Methode 4 van 4:

Een kleurenanimatie instellen als achtergrond

Pdf downloaden

Vind je een effen kleur als achtergrond maar niet, ga dan experimenteren met wisselende kleurenachtergronden. Vanaf HTML 5, moeten achtergrondkleuren gedefinieerd worden met CSS (Cascading Style Sheets). Heb je nog nooit een achtergrondkleur ingesteld met CSS, lees dan het deel over het instellen van een effen achtergrondkleur voor je deze methode probeert.
2
Voeg de eigenschap animation toe aan het "body"-element. Je zult 2 verschillende eigenschappen moeten toevoegen, omdat elke browser weer andere code vereist.^[6]XBron
```
<!DOCTYPE html><html><head><style>body {    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;    }</style></head><body></body></html>
```
- -webkit-animation is de eigenschap vereist voor op Chrome gebaseerde browsers (Chrome, Opera, Safari). animation is de standaard voor alle andere browsers.
- colorchange is dat wat in dit voorbeeld de animatie wordt genoemd.
- 60s is de duur (60 seconden) van de animatie/transitie. Zorg dat je dit voor zowel de webkit als de standaardsyntax instelt.
- infinite geeft aan dat de animatie oneindig moet herhalen. Als je de kleuren liever in een lus wilt laten lopen om vervolgens te stoppen bij de laatste kleur, dan kun je dit stuk achterwege laten.
3
Voeg kleuren toe aan je animatie. Nu ga je de @keyframes-regel gebruiken om de achtergrondkleuren in te stellen die moeten worden doorlopen, evenals hoelang elke kleur op de pagina te zien is. Nogmaals, je zult meerdere coderingen toe moeten voegen voor de diverse browsers.^[7]XBron
```
<!DOCTYPE html><html><head><style>body {    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;}@-webkit-keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}@keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}   </style></head><body></body></html>
```
- Merk op dat de twee regels (@-webkit-keyframes en @keyframes dezelfde waarden hebben voor de achtergrondkleuren en percentages. Het moet uniform blijven, zodat de ervaring voor alle browsers hetzelfde blijft.
- De percentages (0%, 25%, etc.) staan voor de totale duur van de animatie (60s). Wanneer de pagina laadt zal de achtergrond de kleur hebben, ingesteld op 0% en (#33FFF3). Als 25% of 60 seconden van de animatie is gespeeld, zal de achtergrond overgaan naar #78281F, enzovoort.
- Je kunt de tijdsduur en kleuren naar wens aanpassen.
Advertentie