Image de fond (background) qui s’étire via CSS
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!