Niveau :

Arrière-plans avec CSS 3 Backgrounds

Introduction et background-size

Sommaire

Depuis que les feuilles de style existent, la gestion des images d'arrière-plan est prévue : les célèbres propriétés background-color, background-image, background-position, background-repeat et background-attachment naissent avec CSS1, même si malheureusement leur compatibilité n'est pas encore totale.

Ces propriétés connues de tout bon webdesigner permettent de contrôler l'apparence de l'arrière plan d'une boîte. Un des modules de CSS3 étend ce contrôle de façon à répondre à des besoins plus actuels et évolués, notamment via le redimensionnement et la superposition des images.

Background-size

La Syntaxe

x-background-size: [ pourcentage | longueur | auto ]
Où x représente l'extension propriétaire : -moz ou -o ou -webkit selon les navigateurs

Définition

Background-size spécifie la taille de l'image dans l'arrière plan.
La première valeur détermine la largeur (ou proportion) horizontale, la deuxième la largeur verticale. Si une des valeurs n'est pas précisée elle sera automatiquement remplacée par "auto" avec le ratio de l'image.

• Pourcentage : redimensionne l'image suivant la zone de position du background(déterminé par -moz-background-origin)
• Longueur : redimensionne l'image selon la valeur définie

Illustration

Prenons un élément de type bloc (<div> en l'occurence) que nous allons triturer pour nos expériences. Commençons avec une simple couleur d'arrière plan :

div {
  padding: 20px;
  width: 500px;
  height: 200px;
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
}

Ajoutons à notre élément une image en fond répétée par défaut

div {
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg");
}

A présent, appliquons un background-size à 100% afin que l'image d'arrière-plan occupe tout l'espace de l'élément :

div {
  border: 5px dotted #0e6c6f;
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg");
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

Autre variante (nous nous limiterons dorénavant à l'extrension propriétaire -webkit-):

div {
  background-color: #5fc9cd;
  background-image: url("alsa-beige.jpg");
  -webkit-background-size: 25% 25%;
}

Implémentation sur les navigateurs actuels

Comme l'on peut s'en douter, ces propriétés CSS3 sont encore à l'état de brouillon et les différents navigateurs ne sont pas tenus de les prendre en charge... ce dont Internet Explorer ne se prive pas (même IE8).

• Sous IE : impossible
• Sous Opera : fonctionne dès la version 9.5 à l'aide -o-background-size
• FireFox : fonctionne sous FF3.6 avec -moz-background-size
• Safari : fonctionne depuis Safari v3.0 avec -webkit-background-size