background CSS propriété

Définition de la CSS background.

La propriété d'Arrière-plan CSS background est un raccourci pour déclarer un ensemble de propriétés d'arrière plan (fond) en une seule fois.

Exemple de syntaxe CSS background :

background : green url(background.gif);
background : green url(/img/background.gif) no-repeat scroll 10px 20px;

/* Ecriture CSS 3*/
background : green url(/img/background.gif) no-repeat scroll 10px 20px / 50px padding-box;

La propriété CSS background peut prendre à la suite, les valeurs des propriétés CSS de (dans l'ordre énoncé):

background-color : modifie la couleur d'arrière plan (couleur de fond) (ex :tomato)
background-image : ajoute une image d'arrière plan (image de fond)
background-repeat : modifie la répétition de l'image d'arrière plan (répétition de l'image de fond).
background-position : modifie la position de l'image d'arrière plan (position de l'image de fond) dans la zone d'arrière plan. Toujours avant background-size.
background-size : modifie la tailles de l'image d'arrière plan dans la zone d'arrière plan. Remarquez l'utilisation du slash / qui indique que les valeurs après sont de type background-size. Si on ne met pas le slash, les valeurs sont considérées comme background-position. Introduit en CSS3 dans l'écriture de la propriété.
background-attachment : fixe l'image d'arrière plan (fixe l'image de fond)
background-origin : définie le point d'origine pour le positionnement de l'image d'arrière-plan. Introduit en CSS3 dans l'écriture de la propriété.
background-clip : définie les limites de la zone d'arrière plan. Introduit en CSS3 dans l'écriture de la propriété.

Il est possible d'omettre des valeurs.

Exemple de code background CSS

Conditions d'application de la CSS background.

La propriété CSS background est applicable sur toutes les balises (X)HTML, elle est reconnue par tous les navigateurs.

Problème d'interprétation de background en Css.

La propriété de feuille de style background CSS peut poser de problèmes d'interprétations sous Nestcape, Firefox, Mozilla.

Evolution de la syntaxe CSS de background.

Ecriture de la Css background selon les versions CSS

En CSS 2, les valeurs des propriétés CSS autorisées sont dans l'ordre (*) :

background-color
background-image
background-repeat
background-attachment
background-position

Exemple d'écriture de background en Css2 :

background : green url(/img/background.gif) no-repeat fixed 10px

En CSS 3, les valeurs des propriétés CSS autorisées sont dans l'ordre (*) :

background-color
background-image
background-repeat
background-attachment
background-position / background-size
background-origin
background-clip

Exemple d'écriture de background en Css3 :

background : green url(/img/background.gif) no-repeat fixed 10px / 50px padding-box ;

*) Tant que les valeurs sont identifiables, l'ordre à normalement peu d'importance, par exemple la valeur no-repeat de background-repeat peut être mise à n'importe quel endroit, car aucune autre propriété du raccourci n'a cette valeur.
Par compte, background-position et background-size peuvent avoir des valeurs identiques. Il est donc important de respecter leur ordre les unes par rapport aux autres.

Règles de syntaxes CSS pour background.

Règles de la Css background-size relatives aux arrière-plans multiples

Dans le cadre des images d'arrière-plans multiples, vous pouvez déclarer plusieurs images d'arrière-plan dans la Css background.
Chaque ensemble doit être séparée par une virgule (,).
Attention, seul le dernier ensemble doit avoir la propriété background-color.
Chaque image ou dégradé déclaré se situe "dans l'espace" derrière le précédent.

Ecriture de la Css background pour des images d'arrière-plan multiple :

background : 
/* premier ensemble */
  url(/img/background-image-1.jpg) repeat-x -20% 30% / auto content-box scroll,
/* second ensemble */
  url(/img/background-image-2.png) no-repeat 30px -20px / auto padding-box scroll,
/* dernier ensemble avec couleur d'arrière-plan */
  red url(/img/background-3.gif) repeat left 10px top 10px / auto border-box scroll;

Compatibilités navigateurs de la propriété background

Détails des versions de la CSS background: Propriété background est compatible avec CSS1 et plus.; Propriété background est compatible avec CSS2 et plus.; Propriété background est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS background: Propriété CSS background plus ou moins compatible à partir de Chrome 21; Propriété CSS background plus ou moins compatible à partir de Firefox 3.6; Propriété CSS background est compatible à partir de Internet Explorer 6; Propriété CSS background plus ou moins compatible à partir de Opera 10; Propriété CSS background plus ou moins compatible à partir de Safari 1.3

Votre avis sur la définition background en CSS

Votez pour la définition CSS `background`

Votes: 4.1 / 5 - 20 votes
Cliquez sur une étoile pour voter.

Cours et FAQ en rapport avec la propriété Css background

Les cours CSS associés à la définition background

Vous trouverez ci-dessous des liens vers les cours CSS qui vont vous permettre de mieux comprendre ou d'utiliser la propriété background CSS.

Les formats de couleur CSS

FAQ et AIDES CSS parlant de background

Vous trouverez ci-dessous des liens vers la FAQ CSS qui vont vous permettre de trouver de l'aides et d'autres propriétés CSS du même thème que la propriété background CSS.

Thème : Les fonds et arrières plans CSS
Thème : Formulaire

background répond aux questions suivantes :

Comment mettre, spécifier une image ou une couleur de fond ou d'arrière plan en Css ?
Comment mettre spécifier les propriétés de fond ou d'arrière plan en une seul fois en Css ?
Autres questions les plus posées en Css.

Définitions annexes à la Css background

Définitions CSS annexes background

background-attachment: La propriété d'Arrière-plan CSS BACKGROUND-ATTACHMENT permet de fixer l'image d'arrière plan (image de fond) lorsque l'on utilise les barres de défile...[ background-attachment ]
background-clip: La propriété d'Arrière-plan CSS BACKGROUND-CLIP permet de gérer les limites de la zone d'arrière plan à l'intérieur de l'élément. La Css background-cl...[ background-clip ]
background-color: La propriété d'Arrière-plan CSS BACKGROUND-COLOR permet de spécifier la couleur de l'arrière plan ou couleur de fond d'un élément HTML ou XTHML. Cette...[ background-color ]
background-image: La propriété d'Arrière-plan CSS BACKGROUND-IMAGE permet de mettre des ou une image d'arrière-plan ou un dégradé de couleur linéaire en arrière-plan ou...[ background-image ]
background-origin: La propriété d'Arrière-plan CSS BACKGROUND-ORIGIN permet de déterminer le point d'origine de la zone d'arrière-plan par rapport auquel la propriété Cs...[ background-origin ]
background-position: La propriété d'Arrière-plan CSS BACKGROUND-POSITION permet de positionner des ou une image (image de fond) au sein du même l'arrière-plan. Le coin hau...[ background-position ]
background-repeat: La propriété d'Arrière-plan CSS BACKGROUND-REPEAT permet de gérer la répétition horizontale ou/et verticale des ou de l'image d'arrière-plan. La répét...[ background-repeat ]
background-size: La propriété d'Arrière-plan CSS BACKGROUND-SIZE permet de modifier la taille des ou de l'image d'arrière-plan à l'intérieur de la zone d'arrière plan ...[ background-size ]