INFOS-AREA
  Arrière-plans avec CSS 3 Backgrounds
 

Introduction et background-size

Tutoriel par SIMON-K (Infographiste, Concepteur - Designer Graphique et Multimédia, Strasbourg)
Mis à jour le 12 Août 2009. 3007 lectures.

Sommaire

  1.  
  1. Introduction et background-size
   2. Background-clip
   3. Background-origin
   4. Plusieurs images dans un Background
   5. Un dégradé en CSS
  1.  

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
}

Div avec uniquement une couleur d'arrière plan

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")
}

Div - Background-image

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%
}

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%
}

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

Background-clip

La Syntaxe

x-background-clip: border | padding | content (uniquement avec safari)
x = -moz ou -o ou -webkit selon les navigateurs

Définition

Permet de définir les limites de l'arrière-plan à l'intérieur de la boîte représentée par l'élément.

  • border : L'arrière plan s'étend jusqu'a l'extrême limite de la bordure
  • padding : Aucun arrière-plan sera présent en-dessous de la bordure : l'extrême limite sera celle du padding
  • content : L'arrière plan se limite au contenu

Illustration

Le fond se limite au contenu :

div { 
  ... 
  background-image: url("alsa-vert.jpg")
  -webkit-background-clip: content; 
}

background-clip:content

Le fond se limite aux marges internes (padding) :

div { 
  ... 
  background-image: url("alsa-vert.jpg")
  -webkit-background-clip: padding; 
}

background-clip:padding

Le fond est présent même sous les bordures :

div { 
  ... 
  background-image: url("alsa-vert.jpg")
  -webkit-background-clip: border; 
}

background-clip:border;


Background-origin

La Syntaxe

x-background-origin: border | padding | content
x = -moz ou -o ou -webkit selon les navigateurs

Définition

Positionne la zone de l'arrière plan.(l'origine de l'image d'arrière plan)

  • border : La position de l'arrière plan est relative au bord : l'image peut donc aller derrière les bords
  • padding : La position de l'arrière plan est relative au padding
  • content : La position de l'arrière plan est relative au contenu

Illustration

div { 
  padding: 30px
  width: 500px
  height: 200px
  border: 5px dotted #0e6c6f
  background-color: #5fc9cd
  background-image: url("alsa-beige.jpg")
  -webkit-background-origin: content; 
  background-repeat: no-repeat
}

background-origin:content

div
  ... 
  -webkit-background-origin:padding; 
}

background-origin:padding

div
  ... 
  -webkit-background-origin:border; 
}

background-origin:border

Implémentation sur les navigateurs actuels

  • Sous IE : impossible*
  • Sous Opera : impossible
  • FireFox : -moz-background-origin (v1.0)
  • Safari : -webkit-background-origin (v3.0)

* Jusqu'à IE7, la valeur par défaut est background-origin: border. A partir de IE8 la valeur est background-origin: padding.



Plusieurs images dans un Background

CSS 3 rend possible l'affichage de plusieurs images dans un même arrière plan en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat.
Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété sera l'image du premier plan.

Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan.

L'ordre de déclaration est important : dans l'exemple ci-après, la position "left top" s'applique uniquement à la première image et "right bottom" s'applique uniquement à la deuxième image. Si une seule propriété est spécifiée, elle sera appliquée à l'ensemble des images.

div { 
  ... 
  background-color: #5fc9cd
  background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg")
  background-position: left top,right bottom
  background-repeat: no-repeat,no-repeat
}

mutliple-background

Le code suivant affiche exactement le même résultat que précédemment.

div { 
  ... 
  background-color:#5fc9cd
  background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg")
  background-position: left top,right bottom
  background-repeat: no-repeat
}

Illustrons le système de calque et de chevauchement :

div { 
  border: 5px dotted #0e6c6f
  background-color: #5fc9cd
  background-image: url("alsa-beige.jpg"),url("alsa-vert.jpg")
  background-position: left top,45px 30px
  background-repeat: no-repeat
}

superposition de 2 images en arrière-plan

En inversant simplement l'ordre des images :

div { 
  border: 5px dotted #0e6c6f
  background-color: #5fc9cd
  background-image: url("alsa-vert.jpg"),url("alsa-beige.jpg")
  background-position: left top,45px 30px
  background-repeat: no-repeat
}

superposition des images 2

Compatibilité navigateur

  • Firefox 3.6
  • Chrome 2
  • Safari 3

Un dégradé en CSS

De nouvelles propriétés permettent de réaliser et gérer des arrière-plans de teintes dégradées. Ces propriétés CSS3 sont déjà prises en charge dans la version 3.6 de Firefox -moz-radial-gradient et –moz-linear-gradient, et -webkit-gradient dans Safari.

Créons un fond avec un dégradé de type radial.

dégradé radial

Voici le code pour FireFox :

div { 
  width: 500px
  height: 200px
  background-image: -moz-radial-gradient(center,10px,center,500px,from(#aedae5),to(white)); 
  background-repeat: no-repeat
  position: relative
}

La valeur des propriétés, center + pixels, correspond au départ et à la fin du dégradé.

La valeur des propriétés, from() + to(), correspond à la couleur de départ et à la couleur de fin.

Voici le code pour Safari :

div { 
  width: 500px
  height: 200px
  background-image: -webkit-gradient(radial,center center,10,center center,480,from(#aedae5),to(white)); 
  background-repeat: no-repeat
  position: relative
}

On définit : le type de dégradé,les coordonnées (position) de début et de fin, le rayon (si dégradé radial) et on termine avec les couleurs de début et de fin.

Conclusion

Ces ébauches de propriétés développées dans la troisième mouture de CSS ont tout pour plaire et pour élargir les horizons des webdesigners. Un bon nombre de limites de CSS2 devraient être levées, même si l'on peut se mettre à rêver de fonctionnalités encore plus folles telles que la rotation des images d'arrière-plan.









Ajouter un commentaire à cette page:
Ton nom:
Ton message:

 
  Aujourd'hui sont déjà 8 visiteurs (24 hits) Ici! ;  
 
=> Veux-tu aussi créer une site gratuit ? Alors clique ici ! <=