Propriété CSS background-image

La propriété CSS background-image spécifie les images du fond pour des éléments. On peut utiliser une ou plusieurs images.

Par défaut, background-image est placé au coin supérieur gauche d'un élément; elle est répétée verticalement et horizontalement à la fois.

L'arrière-plan de l'élément est sa taille totale, donc il comprend padding et border, mais pas margin.

Si l'image, qu'on définit, n'est pas disponible, on doit définir la background-color.

Valeur initiale none
Appliquée à Tous les éléments. Elle est appliquée aussi à ::first-letter et ::first-line.
Héritée Non.
Animable Non.
Version CSS1 + quelques nouvelles valeurs en CSS3
Syntaxe DOM object.style.backgroundImage = "url(img_tree.png)";

Syntaxe

background-image: url | none | linear-gradient | radial-gradient | repeat-linear-gradient | repeat-radial-gradient | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-image</h2>
    <p>Hello World!</p>
  </body>
</html>

Voyons un autre exemple, où deux images sont utilisées et elles sont spécifiées à l'aide de la propriété background-position.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body { 
      padding: 100px;
      background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      background-attachment: fixed;
      background-position: 5px 50px; 
      background-repeat: no-repeat, repeat;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background-image</h2>
    <p>L'image du fond est positionée  5px du gauche, et 50px ver le bas du haut.</p>
  </body>
</html>

Dans cet exemple, "linear-gradient" avec deux couleurs est spécifié comme l'image du fond pour un élément <div> :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      height: 300px;
      background-image: linear-gradient(#eee, #1c87c9 );
      }
    </style>
  </head>
  <body>
    <h2>Linear gradient comme une image du fond</h2>
    <p>Ce gradient linéaire commence en haut. Cela commence gris, en transition à bleu:</p>
    <div></div>
  </body>
</html>

Voici un exemple avec la valeur "repeating-radial-gradient" avec trois couleurs.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div {
      height: 300px;
      background-color: #cccccc;
      background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
      }
    </style>
  </head>
  <body>
    <h2>Linear gradient comme une image du fond</h2>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
url Définit l'url de l'image. On peut spécifier plus qu'une image séparées par virgules.
none Il n'y aura pas aucune image du fond. C'est la valeur initiale.
linear-gradient Un gradient linéaire est spécifié comme l'image du fond.
radial-gradient Un gradient radial est spécifié comme l'image du fond.
repeat-linear-gradient Répéte un gradient linéaire.
repeat-radial-gradient Répéte un gradient radial.
initial Définit la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

15.0+ 4.0+
3.6 -moz-
7.0+ 11.5+
10.1 -o-


Trouvez-vous cela utile?

Articles Associées