background-image CSS propriété

Définition de la CSS 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 un dégradé de couleur radial en arrière-plan. Par défaut, l'image d'arrière-plan ou le dégradé de couleur vont s'étendre sous les bordures.

/* En CSS 2*/
background-image : url( image.gif );

/* En CSS 3 */
background-image : linear-gradient( to bottom, #f0f9ff 0%,#a1dbff 100% );
background-image : radial-gradient( ellipse at center, #f0f9ff 0%,#a1dbff 100% );
background-image : url( image.gif ), url( image2.gif );

La propriété de feuille de style background-image CSS peut prendre une/des valeurs suivantes :

• none : pas d'image ou de dégradé en arrière-plan, valeur par défaut.
• url(url-image) : l'url de l'image d'arrière plan, peut être relative ou absolue.
  Le point de départ de l'url relative de l'image est l'endroit où se trouve la feuille de style background-image.
• linear-gradient() : fonction Css pour faire un dégradé linéaire en arrière-plan.
• radial-gradient() : fonction Css pour faire un dégradé radial en arrière-plan.
• inherit : l'arrière plan ou fond hérite de la valeur du background-image de son parent (CSS2).

Exemple de code background-image CSS

Conditions d'application de la CSS background-image.

La propriété de feuille de style background-image CSS est applicable sur presque toutes les balises HTML ou XHTML, elle est reconnue par tous les navigateurs.

La valeur de la CSS background-image peut être mise directement dans la propriété de raccourci CSS background.

Héritage des valeurs Css de background-image.

La propriété de feuille de style background-image n'est pas héritée celle de son élément parent.

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

Attention lorsque vous utilisez des feuilles de styles externes, netscape 4.7 prend comme point de départ de l'url l'endroit où se trouve la feuille de style alors que Internet Explorer prend comme origine la page html.
Donc si votre feuille de style est dans un autre dossier mettez soit :

• une url absolue (http://www.mon.site/image/fond.gif).
• une url relative à la racine du site(/image/fond.gif).

Evolutions de la syntaxe CSS de background-image.

En CSS3 les fonds multiples ont été introduits, la propriété CSS background-image CSS, accepte de prendre plusieurs valeurs séparées par une virgule.