background-color

In de serie CSS op zondag, ben ik aangekomen bij background-color. Dit is waarschijnlijk een van de meest gebruikte onderdelen van CSS voor een website. Je gebruikt het om de achtergrond van een element een kleur te geven. De kleur is van invloed op het hele element, inclusief de border en de padding. Als je precies wilt weten hoe het met padding, margin en border zit verwijs ik je naar het artikel over het boxmodel.

De waarden van background-color
Background-color heeft drie waarden. Ten eerste de overerving (inherit), waarbij dus uitgegaan wordt van een eerdere waardebepaling. Ten tweede transparant, de kleur is doorzichtig, dus neemt de achtergrond de kleur aan van het onderliggende element. Ten derde een kleur. Hierbij kun je kiezen voor verschillende kleurnamen, te weten
#RRGGBB – bijv. #FF0000 voor rood
#RGB – bijv. #F00 voor rood
rgb(rrr.rr%,ggg.gg%,bbb.bb%) – bijv. rgb(0%,0%,100%) voor blauw – n.b. je mag hier dus tot twee cijfers achter de komma gebruiken
rgb(rrr,ggg,bbb) – bijv. rgb(0,255, 0) voor groen – n.b. De kleuren worden opgebouwd uit getallen van 0 tot 255.
kleurnaam – bijv. ‘blue’ voor blauw. n.b. De namen van de kleuren zijn: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white en yellow.
Zie voor de belangrijkste kleuren de kleurenkaart.

Standaardinstelling
De standaardinstelling voor background-color is ’transparant’.

Voorbeelden

h4 {background-color: white;}
p {background-color: rgb(50%,50%,50%);}
pre {background-color: #FF9;}

De achtergrond kleur van dit tekstvak is #0099FF.

Alle CSS elementen