1) Zorg er voor dat de html en body elementen van de website altijd zo hoog en breed zijn als het venster:

  html, body {
  height: 100%;
  width: 100%;
}

2) Gebruik een container die altijd zo breed is als het venster:

  <div class="container-fluid">

</div>

3) Maak deze container net zo hoog als het venster:

  <div class="container-fluid schermafbeelding">

</div>

  .schermafbeelding {
  height: 100%;
}

4) Geef deze container een achtergrond afbeelding en zorg dat deze altijd vullend is.

  .schermafbeelding {
  height: 100%;

  background-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/05/city-wallpaper-7.jpg);
  background-position: center center;
  background-size: cover;
}

DONE! Zie hieronder een voorbeeld:

See the Pen One-page full-background-image bootstrap by Nangko (@nangko) on CodePen.


268 0 0