06 - CSS - achtergrond

• ICT
• MBO
• Studiejaar 1,2

Achtergrond in CSS

Leerdoel

Aan het einde van de les kun je achtergrondstijlen toepassen in CSS.

Wat weet je al over achtergrond in CSS?

Achtergrondkleur

Met CSS kun je de achtergrondkleur van een element aanpassen met behulp van de 'background-color' eigenschap.

Achtergrondafbeelding

Met CSS kun je een afbeelding als achtergrond van een element instellen met behulp van de 'background-image' eigenschap.

  body {

      background-image: url('pad/naar/afbeelding.jpg');

  }

Achtergrond-herhaling

Met de 'background-repeat' eigenschap kun je bepalen hoe een achtergrondafbeelding wordt herhaald binnen een element.

body {

    background-image: url('pad/naar/afbeelding.jpg');

    background-repeat: repeat-x; /* horizontaal */

    /* repeat-y en no-repeat */

}

Achtergrond-positie

De 'background-position' eigenschap bepaalt de startpositie van een achtergrondafbeelding binnen een element.

body {

    background-image: url('pad/naar/afbeelding.jpg');

    background-repeat: no-repeat;

    background-position: right top;

}

Oefening

• Maak twee nieuwe pagina's die te bereiken zijn via hyperlinks en geef elke pagina een ander achtergrond kleur.

• Kan je ook een pagina maken waarbij een image als background wordt gebruikt?
  

Samenvatting

Je hebt nu geleerd hoe je achtergrondstijlen kunt toepassen in CSS, waaronder achtergrondkleur, achtergrondafbeelding, herhaling en positie.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.