background

Vanaf nu iedere zondag een CSS element besproken. Vandaag begin ik bij het begin met het element ‘background‘, achtergrond. Background is een element waarmee je verschillende andere elementen verkort kun weergeven. Ik bespreek achtereenvolgens de verschillende waarden, de manieren waarop je dit element kunt gebruiken, en ik geef een paar voorbeelden.

De waarden van background
Met het element background kun je de volgende elementen gebruiken zonder deze specifiek op te geven. Wanneer je een element specifiek opgeeft nadat je dit element hebt toegevoegd dan overruled het specifieke element het algemene ‘background’ element.
background-color, background-image, background-repeat, background-attachment, background-position zijn de verschillende onderdelen van background. Ook kan background voorgaande uitwerkingen overerven. Daarmee wordt bedoeld dat als je in body een background wit maakt en je plaatst in een wrapper nogmaals een background met het attribuut ‘inherit‘, dan krijgt deze dezelfde kleur achtergrond.

Standaardinstelling
Ieder element heeft een standaardinstelling. Deze zijn voor elke individueel element apart en zullen dus hier niet besproken worden, vanaf de volgende natuurlijk wel (dat is background-attachment).

Omschrijving van background
Background is de verkorte methode om de achtergrond te specificeren. Dit element is goed hanteerbaar omdat je op een eenvoudige manier de hele achtergrond kunt instellen. Let er wel op dat wanneer je een bepaald onderdeel van de individuele elementen niet specifiek opschrijft, de standaardwaarden worden gehanteerd, bijvoorbeeld ‘repeat’ en ‘position’. De volgende regels hebben dezelfde verschijning:

background: yellow;
background: yellow none top left repeat;

Deze standaardinstelling kan dus verderop in de code al vastgelegde code overrulen. Bijvoorbeeld in de volgende code:

h1 {background-repeat: repeat-x}
h1, h2 {background: yellow url(hoofdlogo.jpg);}

Hierbij krijgt h1 toch repeat mee ondanks dat eerder repeat-x wordt vastgelegd. De tweede regel zorgt ervoor dat de eerste regel niet meer geldig is.
Voorbeelden

body {background: white url(bg12.jpg) fixed center repeat-x}
p {background: url(http://www.flickr.com/plaatje.jpg) #333;}
pre {background: yellow}

De eerste regel zorgt voor een witte achtergrond met een plaatje vastgezet in het midden, over de horizontale as herhaald als de browser breder is dan het plaatje.
De tweede regel haalt een achtergrondplaatje van een andere site, en de achtergrond wordt #333. De achtergrond krijgt verder alle standaardinstellingen mee.
De laatste regel zorgt ervoor dat de achtergrond voor pre-tekst (preformatted – een inline element) geel wordt.

Dat was het voor nu
Dat was de CSS op zondag voor deze week. Volgende keer zoals geschreven ga ik het hebben over background-attachment. Tot we over een jaar ofzo alle elementen hebben gehad en we bij z-index eindigen. Hopelijk heb je er wat aan. In ieder geval is onze referentie straks compleet.

Alle CSS elementen