w3docs logo

Propriété CSS background

La propriété CSS background est une propriété raccourcie, qui permet de définir toutes les propriétés de style de fond. La propriété background comprend les propriétés suivantes :

La propriété background-color est utilisée quand on veut changer la couleur de quelques tags background.

La propriété background-image définit une ou plusieurs image du fond pour un élément.

Avec la propriété background-repeat on peut contrôler la position répétée d'un élément.

On utilise la propriété background-position pour la position de l'image du fond.

La propriété background-origin définit la zone de placement de fond qui est la position d'une image placée en utilisant la propriété background-image.

La propriété background-clip est utilisée pour placer l'image du fond ou couleur en dessous de sa bordure.

La propriété background-attachment définit si l'image du fond est fixée ou elle fera défiler avec le reste de la page.

La propriété background-size est utilisée pour définir la taille de l'image du fond.

Valeur initiale Voyez les propriétés individuelles.
Appliquée à Tous les éléments. Elle est appliquée aussi à ::first-letter.
Héritée Non.
Animable Oui. Background-color, background-position, et background-size sont animables.
Version CSS1+ nouvelles propriétés en CSS3
Syntaxe DOM object.style.background = "blue url(img.jpeg) bottom left repeat";

Syntaxe

background: bg-color  bg-image  bg-position  bg-size  bg-repeat  bg-origin  bg-clip  bg-attachment | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body  {
      background: #8ebf42; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background</h2>
   <p>Ici la couleur de fond est définie comme verte.</p>
  </body>
</html>

Voici un autre exemple, où une image est appliquée à la propriété background.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body  {
      background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
       <h2>Exemple de la propriété background</h2>
       <p>Ici on a utilisée une image du fond.</p>
  </body>
</html>

Voyons un autre exemple avec la propriété background, òu les valeurs background-color, background-image, background-repeat et background-attachment sont appliquées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background</h2>
   <p>Dans cet exemple, la propriété  background spécifie background-color, la propriété background-image pour définir une image pour le fond, background-repeat pour spécifier que l'image ne soit pas répétée, background-attachment pour spécifier si l'image est fixée et  background-position pour spécifier que l'image était au centre.</p>
  </body>
</html>

Un autre exemple avec la propriété background-size, qui est définie pour spécifier la taille du fond.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background</h2>
    <p>Ici la dimension de l'espace de fond est définie comme 100px.</p>
  </body>
</html>

Exemple avec background-clip. Elle spécifie que loin le fond doit prolonger dans un élément.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: 8px dotted #ccc;
      padding: 25px;
      background: #ccc;
      background-clip: padding-box;  
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background</h2>
    <div>
      <p>Le background-clip pour cet élément div est défini à padding-box.</p>
    </div>
  </body>
</html>

Voici un autre exemple, où la propriété background-origin est utilisée. Elle permet l'image du fond de commencer du coin supérieur gauche du contenu.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: 10px double #ccc;
      padding: 25px;
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété background</h2>
    <p>Ici background-origin: padding-box (par défaut) est défini.</p>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
background-color Définit la couleur du fond.
background-image Définit une ou plusieurs images.
background-position Spécifie le placement des images du fond.
background-size Définit la dimension de l'image du fond.
background-repeat Spécifie comment répéter les images du fond.
background-origin Spécifie la zone de placement des images du fond.
background-clip Spécifie la zone pour dessiner des images du fond.
background-attachment Spécifie si l'image est fixée ou non.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+
Trouvez-vous cela utile?