Niveau : Débutant

Arrière-plans avec CSS3 Backgrounds

Tutoriel par (Art Director & Creative Designer, Paris)
Créé le , mis à jour le (160285 lectures)
Tags : css, background, css3, background-size

Sommaire


background-size

La propriété CSS background-size spécifie la taille de l'image dans l'arrière plan.

Syntaxe

background-size: x y;
  • x détermine la dimension horizontale (pixels, em, auto, pourcentage %, etc.),
  • y détermine la dimension verticale (pixels, em, auto, pourcentage %, etc.)

Valeurs possibles

  • Dimensions : par exemple "px" ou "%" : précise la hauteur ou la largeur de l'image.
  • "cover" : forcera à couvrir toute la surface sans déformer l'image. Quitte à la rogner.
  • "contain" : forcera l'image à ne pas dépasser de l'élément sans la déformer.

Fond qui occupe tout l'espace de l'élément

CSS3 Background-Size

Code source :

div {
  background-image:url(soif.jpg);
  background-size: 540px 360px;
}

Fond qui occupe 30% de la largeur du bloc avec une répétition.

CSS3 Background-Size

Code source :

div {
  background-image:url(soif.jpg);
  background-size: 30% 30%;
}

Démonstrations


"Full-Background" sans déformation

Avec la valeur background-size: cover, l'arrière-plan "couvre" au mieux tout le fond.

Un tutoriel expliquant plus en détails cette technique (entre autres) : Créer un arrière-plan extensible intelligent

CSS Background-size cover

html {
  margin:0;
  padding:0;
  background: url(image/bg.jpg) no-repeat center center fixed; 
  background-size: cover; 
}

Démonstrations


Prise en charge

Navigateurs Versions
Internet Explorer Internet Explorer 9+
Firefox Firefox 3.6+
Chrome Chrome 3+
Safari Safari 3+
Opera Opera 9.5+

Le préfixe -moz-, -webkit-, -ms- ou -o- pourra être requis pour les navigateurs utilisant des pré-versions de cette propriété.