background-color

css referentieIn 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
#RRGGBBbijv. #FF0000 voor rood
#RGBbijv. #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.
kleurnaambijv. ‘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

Als je dit een interessant
artikel vond…

wil je vast ook mijn NIEUWSBRIEF!
Iedere week weer een nieuw ARTIKEL!

Krijg je binnenkort ook dit ebook met 101 inspirerende quotes van ondernemers!
ebook 101 quotes!

Auteur: Bjorn Simmering

Mijn naam is Bjorn Simmering en met deze website ga ik dus door het leven als Meneer Simmering. Ik schrijf over reizen, cadeaus voor mannen en meer... Lees meer over mij »

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *