CSS Backgrounds


De CSS achtergrond eigenschappen worden gebruikt om de achtergrond effecten voor de elementen te definiëren.

CSS achtergrond eigenschappen:

  • background kleur
  • background image
  • background repeat
  • background-attachment
  • background-position


CSS background-color

De eigenschap background-color geeft de achtergrondkleur van een element aan.

 

CSS Voorbeeld:

De achtergrondkleur van een pagina wordt ingesteld als volgt:

 
  body {
background-color: lightblue;
}
 
   


CSS kleurwaarden

Met CSS, kunnen kleuren worden gespecificeerd op verschillende manieren:

  • Een geldige kleur naam - zoals "red"
  • Een HEX waarde - zoals "#ff0000"
  • Een RGB waarde - zoals "rgb (255,0,0)"

Kijk naar CSS kleurwaarden voor een lijst met mogelijke kleurwaarden.

En voor de CSS kleurnamen heb je hier een lijst met alle mogelijk kleurnamen.

  CSS Voorbeeld:

Hier, op de <h1>, <p> en <div> elementen zullen verschillende achtergrondkleuren hebben:

 
  h1 {
     background-color: green;
}

div {
     background-color: lightblue;
}

p {
     background-color: yellow;
}

 

CSS achtergrond afbeelding

De background-image eigenschap geeft een afbeelding te gebruiken als de achtergrond van een element.

Standaard wordt de afbeelding herhaald, zodat het dekt de gehele element.

  CSS Voorbeeld:

de achtergrondafbeelding voor een pagina kan worden ingesteld als volgt uit:

 
  body {
   background-image: url("paper.gif");
}
 
  CSS Voorbeeld:

Dit voorbeeld toont een slechte combinatie van achtergrondafbeelding teksten. De tekst is nauwelijks leesbaar:

 
  body {
   background-image: url("bgdesert.jpg");
}
 

Opmerking: Bij het gebruik van een achtergrondafbeelding, gebruik dan een beeld dat de tekst niet wordt verstoord.


CSS background-repeat

Standaard is de background-image eigenschap herhaalt een afbeelding zowel horizontaal als verticaal.

Sommige afbeeldingen mogen alleen horizontaal of verticaal worden herhaald, of ze zullen er vreemd uitzien, als volgt uit:

  CSS Voorbeeld:  
  body {
   background-image: url("gradient_bg.png");
}
 

Als de afbeelding hierboven enkel horizontaal herhaald wordt (background-repeat: repeat-x; ) wordt de achtergrond als volgt:

  CSS Voorbeeld:  
  body {
   background-image: url("gradient_bg.png");
   background-repeat: repeat-x;
}
 

Tip: Als u een afbeelding vertikaal wilt herhalen, gebruik dan background-repeat: repeat-y;


CSS background-repeat: no-repeat

Voor het enkel éénmaal tonen van de bepaald door de no-repeat eigenschap;

  CSS Voorbeeld:  
  body {
   background-image: url("img_tree.png");
   background-repeat: no-repeat;
}
 

In het bovenstaande voorbeeld wordt de achtergrondafbeelding geplaatst op dezelfde plaats als de tekst. Wij willen de positie van het beeld te
veranderen, zodat hij de tekst niet te veel te verstoren.


CSS background-position

De background-position eigenschap wordt gebruikt om de positie van de achtergrondafbeelding op te geven.

  CSS Voorbeeld:  
  body {
   background-image: url("img_tree.png");
   background-repeat: no-repeat;
   background-position: right top;
}
 

CSS background-attachment

De background-attachment eigenschap geeft aan of de achtergrondafbeelding moet scrollen of vast (zal niet scrollen met de rest van de pagina):

  CSS Voorbeeld:

Geeft aan dat dat de achtergrondafbeelding vast geplaatst is:

 
  body {
   background-image: url("img_tree.png");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
}
 
  CSS Voorbeeld:

Geeft aan dat dat de achtergrondafbeelding met de rest van de pagina moet scrollen:

 
  body {
   background-image: url("img_tree.png");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: scroll;
}
 

CSS achtergrond - Shorthand property

Om de code te verkorten, is het ook mogelijk om alle achtergrond eigenschappen in één pand te geven. Dit heet shorthand property

De verkorte eigenschap voor de achtergrond is background

  CSS Voorbeeld:

Gebruik de shorthand eigenschap om de achtergrond eigenschappen in één verklaring in te stellen:

 
  body {
     background #ffffff url("img_tree.png") no-repeat right top;
 

Bij gebruik van de schorthand eigenschap is de volgorde van de waarden:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Het maakt niet uit als één van die waarden ontbreekt, zolang de anderen in deze volgorde zijn.


Alle CSS achtergrondeigenschappen

Eigenschap Omschrijving
background Stelt alle achtergrondeigenschappen in één verklaring in
background-attachment Stelt in of een achtergrondafbeelding vast is of met de rest van de pagina schuift
background-clip Geeft het schildergebied van de achtergrond aan
background-color Stelt de achtergrondkleur in voor een element
background-image Stelt de achtergrondafbeelding in voor een element
background-origin Geeft aan waar de achtergrondafbeelding(en) is / zijn gepositioneerd
background-position Stelt de positie van een achtergrondafbeelding in
background-repeat Stelt in hoe een achtergrondafbeelding wordt herhaald
background-size Specificeert de grootte van de achtergrondafbeelding(en)