Image de fond (background) qui s’étire via CSS

Publié le 5 avril 2013 dans trucs et astuces pour développeurs | 0 comments

Pour avoir une image de fond qui remplit l’écran et s’étire pour toutes résolutions (même sous IE8), utilisez ce code:

DEMO

HTML

Apposez le code suivant tout juste après l’ouverture de la balise BODY:

<div id="bg-page">
  <img alt="" src="__URL_DE_VOTRE_IMAGE__" />
</div>
<div id="contenu-page">
  ...Reste du contenu de votre page dans ce DIV...
</div>

CSS

#bg-page{
  display: block;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  position: fixed;
}
 
#bg-page img {
  bottom: 0;
  left: 0;
  margin: auto;
  min-height: 50%;
  min-width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}
#contenu-page {
  position: relative;
}

NOTE: dans les instructions CSS3 modernes, la propriété background-size: cover; effectue ce travail plus rapidement, sauf que cette dernière n’est pas compatible avec IE8, tandis que la première démo l’est.

Quand à IE7 et moins, aucune des deux méthodes n’est alors compatible!

Leave a Reply