CSS3 Arrière-plan

Arrière-plans CSS3

CSS3 contient plusieurs nouvelles propriétés d'arrière-plan qui offrent un meilleur contrôle sur les éléments d'arrière-plan.

Dans ce chapitre, vous découvrirez les propriétés d'arrière-plan suivantes :

  • background-image
  • background-size
  • background-origin
  • background-clip

Vous apprendrez également à utiliser plusieurs images d'arrière-plan.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent le premier numéro de version du navigateur qui prend en charge la propriété.

Le nombre précédant immédiatement -webkit-, -ms- ou -moz- est le premier numéro de version du navigateur qui prend en charge la propriété préfixée.

Propriété
background-image
(avec plusieurs arrière-plans)		 4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

Propriété background-image CSS3

En CSS3, les images d'arrière-plan peuvent être ajoutées via la propriété background-image.

Les différentes images d'arrière-plan sont séparées par des virgules, et parmi toutes les images, la première est affichée sur la couche la plus haute.

Exemple

#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }

Essayez-le vous-même »

Différentes propriétés peuvent être définies pour différentes images.

Exemple

#example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

Essayez-le vous-même »

Propriété background-size de CSS3

background-size spécifie la taille des images d'arrière-plan. Avant CSS3, la taille d'une image d'arrière-plan était déterminée par la taille réelle de l'image.

En CSS3, vous pouvez spécifier des images d'arrière-plan, ce qui vous permet de redéfinir la taille des images d'arrière-plan dans différents contextes. Vous pouvez spécifier des tailles en pixels ou en pourcentages.

La taille que vous spécifiez est une taille en pourcentage relative à la largeur et à la hauteur de l'élément parent.

OperaSafariChromeFirefoxInternet Explorer

Exemple 1

Réinitialiser l'image d'arrière-plan :

div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; }

Essayez-le vous-même »

OperaSafariChromeFirefoxInternet Explorer

Exemple 2

Étirer l'image d'arrière-plan pour remplir complètement la zone de contenu :

div { background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; }

Essayez-le vous-même »

Propriété background-origin CSS3

La propriété background-origin spécifie la zone de positionnement des images d'arrière-plan.

Les images d'arrière-plan peuvent être placées dans les zones content-box, padding-box et border-box.



OperaSafariChromeFirefoxInternet Explorer

Exemple

Positionner l'image d'arrière-plan dans la zone content-box :

div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box; }

Essayez-le vous-même »

Images d'arrière-plan multiples en CSS3

CSS3 vous permet d'ajouter plusieurs images d'arrière-plan à un élément.
OperaSafariChromeFirefoxInternet Explorer

Exemple

Définissez deux images d'arrière-plan sur l'élément body:

body { background-image:url(img_flwr.gif),url(img_tree.gif); }

Essayez-le vous-même »

Propriété background-clip de CSS3

En CSS3, la propriété background-clip spécifie que l'arrière-plan est dessiné à partir d'une position spécifiée.

Exemple

#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }

Essayez-le vous-même »

Nouvelles propriétés d'arrière-plan

Séquence Description CSS
background-clip Spécifie la zone de dessin de l'arrière-plan. 3
background-origin Spécifie la zone de positionnement de l'image d'arrière-plan. 3
background-size Spécifie la taille de l'image d'arrière-plan. 3
autres extensions