Inspirerend, verbindend en nieuwsgierig
Een leven lang leren
Bezoek de website
‹Terug naar zoeken

06 - CSS - achtergrond

Achtergrond in CSS
1 / 10
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1,2

In deze les zitten 10 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Achtergrond in CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over achtergrond in CSS?

Slide 3 - Woordweb

Deze slide heeft geen instructies

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

Slide 4 - Tekstslide

Deze slide heeft geen instructies

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');
  }

Slide 5 - Tekstslide

Deze slide heeft geen instructies

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 */
}

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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;
}

Slide 7 - Tekstslide

Deze slide heeft geen instructies

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?

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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

Slide 9 - Tekstslide

Deze slide heeft geen instructies

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

Slide 10 - Open vraag

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.