Achtergrond die altijd past

Als eens tegen het probleem aangelopen dat je een achtergrond als foto wilde, maar dat dit niet goed lukte? Ik ook, en naar wat zoeken ben ik achter de oplossing gekomen. Uiteindelijk bleek dat dit helemaal niet zo moeilijk is

Website wrapper

Om te beginnen moet de website binnen één DIV element staan. De meeste moderne sites worden op deze manier opgebouwd, dus dat zal geen probleem zijn. Hier moet er nog een DIV element toegevoegd worden, naast de wrapper. Hierin wordt dan een IMG tag geplaatst die weer naar de afbeelding verwijst. Globaal ziet dit er dan ongeveer zo uit:

  1. <div id="wrapper">
  2.  
  3. </div>
  4. <div id="background_image">
  5.         <img src="images/background.jpg" />
  6. </div>

Bijbehorende CSS

De bijbehordende CSS is verder ook niet zo heel spannend, deze zorgt ervoor dat de afbeelding niet te groot wordt. De CSS die bij de afbeelding hoort ziet er ongeveer zo uit:

  1. div#background_image img {
  2.         position: fixed; /* De afbeelding blijft staan ook al scrollt de pagina.
  3.         z-index: 1; /* De wrapper wordt over de achtergrond DIV heen geplaatst. Hierom moet een z-index worden opgegeven */
  4.         width: 100%; /* Rek de afbeelding uit over de hele breedte */
  5.         height: auto;
  6.         left: 0; /* Plaats de afbeelding helemaal links, strak tegen de kant aan */
  7.         top: 0; /* Plaats de afbeelding strak tegen de bovenkant aan */
  8. }

De CSS die bij de wrapper hoort stelt verder ook niet veel voor:

  1. div#wrapper {
  2.         position: relative;
  3.         z-index: 2;
  4. }

Demo