Abrégé de l'arrière-plan CSS

Propriété abrégée CSS background

Pour raccourcir le code, vous pouvez également spécifier toutes les propriétés d'arrière-plan dans une seule propriété. Cela s'appelle une propriété abrégée.

au lieu de cela :

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Vous pouvez utiliser les propriétés abrégées background:

Exemple

Définir les propriétés d'arrière-plan dans une seule déclaration en utilisant les propriétés abrégées :

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

Essayez-le vous-même

Lors de l'utilisation des propriétés abrégées, l'ordre des valeurs est :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Si une valeur manquante est présente, il suffit de définir les autres valeurs dans cet ordre. Notez que dans l'exemple ci-dessus, nous n'avons pas utilisé la propriété background-attachment car elle n'a pas de valeur.

Toutes les propriétés CSS d'arrière-plan

Propriété Description
background Définir toutes les propriétés d'arrière-plan dans une seule déclaration.
background-attachment Définir si l'image de fond est fixe ou fait défiler avec le reste de la page.
background-clip Définir la zone de dessin de l'arrière-plan.
background-color Définir la couleur de fond de l'élément.
background-image Définir l'image de fond de l'élément.
background-origin Définir où placer l'image de fond.
background-position Définir la position de départ de l'image de fond.
background-repeat Définir si et comment l'image de fond doit être répétée.
background-size Définir la taille de l'image de fond.