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+

Pratiquez vos connaissances

Quels sont les propriétés de fond CSS que vous pouvez modifier de selon le contenu de la page ?
Trouvez-vous cela utile?