Propriété CSS background

La propriété CSS background est un raccourci qui permet de définir tous les styles d'arrière-plan d'un élément en une seule déclaration, au lieu d'écrire chaque propriété sur une ligne distincte. En coulisse, elle se développe en les propriétés longues suivantes :

background-color — définit une couleur d'arrière-plan unie.
background-image — définit une ou plusieurs images d'arrière-plan pour un élément.
background-repeat — contrôle si et comment l'image d'arrière-plan se répète en mosaïque.
background-position — définit la position de départ de l'image d'arrière-plan.
background-origin — définit la zone par rapport à laquelle l'image est positionnée (border-box, padding-box ou content-box).
background-clip — définit jusqu'où l'arrière-plan (couleur et image) s'étend à l'intérieur de l'élément.
background-attachment — définit si l'arrière-plan défile avec la page ou reste fixe.
background-size — définit la taille de l'image d'arrière-plan.

Pourquoi utiliser le raccourci

Écrire une seule ligne background est plus court et plus lisible que cinq ou six propriétés séparées, et cela rend votre intention évidente d'un coup d'œil. Il y a un effet secondaire important à connaître : le raccourci réinitialise chaque propriété longue d'arrière-plan que vous ne mentionnez pas à sa valeur initiale. Par exemple, background: red; réinitialise également tout background-image, background-position, etc. précédemment défini. Pour cette raison, déclarez le raccourci en premier et ajoutez les remplacements (comme un background-size séparé) après.

Ordre et règles spéciales

Les valeurs à l'intérieur de background peuvent apparaître dans presque n'importe quel ordre, mais deux règles sont importantes :

background-size doit suivre background-position, séparé par une barre oblique (/). Par exemple : background: url(bg.png) center / cover; — center est la position et cover est la taille.
Lorsque plusieurs images d'arrière-plan sont superposées, background-color doit venir en dernier, uniquement dans la dernière couche, car la couleur se peint derrière toutes les images.

Valeur initiale	Voir les propriétés individuelles.
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non.
Animatable	Oui. Background-color, background-position et background-size sont animatables.
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;

Exemples

Une couleur d'arrière-plan simple

L'utilisation la plus basique du raccourci consiste à définir uniquement la couleur d'arrière-plan. Toute valeur acceptée par le raccourci peut être omise ; les autres reviennent à leurs valeurs initiales.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS background](/uploads/media/default/0001/03/5774b8353b8a0b810579a25a3cdcc2580213b1ff.png "CSS background property result" =420x)

Utiliser une image d'arrière-plan

Vous pouvez passer une url() au raccourci pour peindre une image en arrière-plan.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here a background image is used.</p>
  </body>
</html>

Essayez vous-même »

Combiner plusieurs valeurs

Cet exemple définit la couleur, l'image, le comportement de répétition, l'attachement et la position en une seule déclaration. L'image est centrée, non répétée et fixée en place pendant que la page défile.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
  </body>
</html>

Essayez vous-même »

Définir la taille de l'arrière-plan

Comme background-size ne peut pas être combiné avec le reste du raccourci sans une barre oblique, il est souvent plus propre de le définir sur sa propre ligne après le raccourci. Ici, cover redimensionne l'image pour remplir tout l'élément.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the size for the background is set to cover.</p>
  </body>
</html>

Essayez vous-même »

Délimiter l'arrière-plan

La propriété background-clip contrôle jusqu'où l'arrière-plan se peint à l'intérieur de l'élément. Avec padding-box, l'arrière-plan s'arrête au bord intérieur de la bordure, et ne transparaît donc pas à travers une bordure pointillée ou en tirets.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <div>
      <p>The background-clip for this div element is set to padding-box.</p>
    </div>
  </body>
</html>

Essayez vous-même »

Positionner l'origine de l'arrière-plan

La propriété background-origin définit la zone par rapport à laquelle l'image est positionnée. Avec padding-box (valeur par défaut), l'image commence à partir du bord intérieur de la bordure.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here background-origin: padding-box (default) is set.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description
background-color	Définit la couleur d'arrière-plan.
background-image	Définit une ou plusieurs images.
background-position	Spécifie la position des images d'arrière-plan.
background-size	Définit la taille de l'image d'arrière-plan.
background-repeat	Spécifie comment répéter les images d'arrière-plan.
background-origin	Spécifie la zone de positionnement des images d'arrière-plan.
background-clip	Spécifie la zone de peinture des images d'arrière-plan.
background-attachment	Spécifie si l'image est fixe ou non.
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent.

Propriétés associées

Si vous avez besoin d'un contrôle plus précis, utilisez les propriétés longues individuelles :

Pratique

Quelles sont les propriétés de CSS background ?