CSS - Achtergronden toevoegen


Met behulp van CSS is het eenvoudig om een achtergrondkleur of een achtergrondafbeelding toe te voegen aan je website. Ook is het mogelijk om een element zoals een div te voorzien van een achtergrondkleur of een achtergrondafbeelding.

Achtergrondkleur

Als eerste de achtergrondkleur, om een kleur in te stellen voor je website gebruik je 'background-color'. Hierachter staat dan de kleur aangegeven, in dit geval rood. In het onderstaande geval is deze kleur van toepassing op de achtergrond van de website maar je kunt dit uiteraard ook specifiek instellen voor bijvoorbeeld een element. In de CSS geef je dan de classnaam aan en dit plaats je hetzelfde als hierboven maar dan met de class.

body {
        background-color:#FF0000;
}


Achtergrondkleur gedeeltelijk transparant
Aanvullend op het bovenstaande kun je ook een gedeeltelijk transparante achtergrondkleur instellen. Instellen gaat op de onderstaande manier met RGBa. Wat je zodoende doet is het aangeven van een kleur in RGB door de eerste drie waardes in te voeren, de vierde waarde (tussen 0.1 en 1) is de dan mate van doorzichtigheid.

div {
        background-color:#ff0000;
        background-color:rgba(255, 102, 0, 0.8);
}

Achtergrondafbeelding

Een achtergrondafbeelding instellen zoals een patroon of een foto is ook eenvoudig. In de CSS gebruik je dan de volgende code met achter 'url' de locatie van de afbeelding.

body {
        background-image: url(background.png);
}


Achtergrondafbeelding herhalen
Als je een afbeelding gaat toevoegen als achtergrond voor je website of voor een element zal deze standaard herhalen, zowel verticaal als horizontaal. Invloed hierop uitoefenen kan middels een extra regel waarmee je aangeeft dat een afbeelding alleen horizontaal of alleen verticaal mag herhalen. Herhalen helemaal uitzetten kan op deze manier ook.

  • repeat - Herhaal de achtergrond zowel horizontaal als verticaal
  • repeat-x - Herhaal de achtergrond horizontaal
  • repeat-y - Herhaal de achtergrond verticaal
  • no-repeat - Achtergrond wordt niet herhaald

body {
        background-image: url(background.png);
        background-repeat:repeat-x;
}


Achtergrondafbeelding positioneren
Op de bovenstaande manier kun je een afbeelding instellen als achtergrond van een pagina of element. In sommige gevallen is het ook handig om de positie van de achtergrond te bepalen. Bijvoorbeeld als je graag wilt dat de achtergrond van een pagina in het midden of juist onderaan de pagina moet komen te staan. Om dit in te stellen gebruik je 'background-position:' gevolgd door een waarde zoals hieronder aangegeven.

  • bottom - Achtergrond aan de onderkant van de pagina
  • center - Achtergrond in het midden van de pagina
  • left - Achtergrond aan de linkerkant van de pagina
  • right - Achtergrond aan de rechterkant van de pagina
  • top - Achtergrond aan de bovenkant van de pagina

Daarnaast kan de positie ook worden ingesteld door pixels op te geven met background-position:10px 30px;. Het eerste getal (10px) is het aantal pixels vanaf de linkerkant, het tweede getal (30px) is het aantal pixels vanaf de bovenkant, pas dit aan naar wens.

body {
        background-image: url(background.png);
        background-repeat:repeat-x;
        background-position:10px 30px;
}


Fixed en scoll
Als laatste kun je bepalen of een afbeelding stil moet blijven staan of moet meebewegen zodra je gaat scrollen op de pagina. Het meebewegen is standaard en geef je aan middels background-attachment:scroll; en het vastzetten, background-attachment:fixed;

<style type="text/css">
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>

Meerdere achtergronden en schaalbare achtergrond

Het is ook mogelijk meerdere achtergronden te gebruiken, meer hierover lees je hier. In een andere tutorial wordt uitgelegd hoe je een schaalbare achtergrond kunt instellen.