attribut BACKGROUND-IMAGE

Rôle

L’attribut background-image permet d’attribuer une image de fond à un élément HTML.

Version : CSS1

Héritage (inherit) : non

Propriété Javascript : element.style.backgroundImage

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 400px;
  height: 200px;
  background-image: url(http://lorempixel.com/400/200/);
}

– Le code HTML

<div></div>

Résultat

Depuis le CSS3, vous pouvez associer plusieurs images avec l’attribut background-image

– Le code CSS

div{
  width: 400px;
  height: 200px;
  background-image:  url(http://lorempixel.com/200/100/) , url(http://lorempixel.com/400/200/);
  background-repeat: no-repeat;
}

Résultat

La dernière image sera placée derrière la première

Compatibilité

L’attribut background-image est pris en charge par tous les principaux navigateurs

Remarque : IE8 et les versions antérieures ne prennent pas en charge plusieurs images de fond

Valeurs

Le référentiel de l’image (le point 0) est situé en haut à gauche du bloc qui contient l’image de fond. La zone d’arrière plan tient compte de la marge interne (padding). Cette image par défaut sera répétée à la fois verticalement et horizontalement. Utiliser l’attribut background-repeat pour gérer la répétition.

Les différentes valeurs de l’attribut background-image sont:

URL de l’image

Indique le chemin de l’image
Syntaxe :
background-image : url(images/photo.jpg)

none

Aucune image ne sera affichée : valeur par défaut
Syntaxe :
background-image : none

initial

Le fond est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un paragraphe peut ignorer l’image de fond imposée par une feuille de style qui le cible.
Syntaxe :
background-image : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
background-image : inherit

A voir aussi

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