Un background plein écran flexible avec CSS

Introduction

Vous voulez une image en arrière plan qui s’adapte a la taille du navigateur, sans se déformer. Pour avoir un exemple de ce que cela donne, vous pouvez aller voir notre atelier qui utilise ce principe en cliquant ici.

Comme vous pouvez le contraster, si vous essayer sur la page, elle ne se déforme pas. Le ratio de l’image est conservé et elle est recadrée.

Ceci est devenu possible grace a l’arrivé d’une nouvelle propriété CSS 3 :

background-size: cover;

L’image

Avant de créer votre page html, il vous faut bien sur avoir une image. L’image doit :

• Etre rectangulaire pour les écrans et de grande taille pour ne pas pixelisé pour les grandes résolutions (1900x1200px par exemple)
• Etre optimisé pour le web : Photoshop (payant) ou Gimp (gratuit) propose ce genre d’outil

Vous pouvez des images sur ces différents site : Fotolia, 500px, Deviantart par exemple (Attention, toutes les images ne sont pas libres de droit)

Le code

Le code HTML

Rien de plus simple, une page HTML vierge

Le code CSS

Nous allons maintenant placer le fond d’écran a la balise en précisant la propriété cover montré plus haut. Et enlever les marges intérieur (padding) et exterieur(margin) sur html, body (A noter qu’il est conseillé de le faire a chaque projet)

html, body
{
margin:0;
padding: 0;
}
body
{
  background: url(img/fond.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}