Background

6

La propriété background est ses différentes sous-propriétés permettent de contrôler l'apparence de l'arrière-plan d'un élément.

Background-color

La propriété background-color permet de définir la couleur d'arrière-plan d'un élément. Cette propriété accepte différents formats de valeurs de couleur.

Par exemple:

  • Nom, ex: green
  • Code hexadécimal (hex), ex: #3FC774
  • RGB, ex: rgb(63, 199, 116)
  • RGBA, ex: rgba(63, 199, 116, 1)
  • HSL, ex: hsl(143, 55%, 51%)

Tous ces exemples (à l'exception de celui utilisant un nom de couleur) correspondent au vert utilisé dans l'exemple ci-dessous, mais écrit dans des formats différents.

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bgc

Pour en savoir plus, voir cet article de MDN sur background-color

Background-image

La propriété background-image permet de définir une image d'arrière-plan à un élément. Elle accepte une ou plusieurs images et des fonctions permettant de générer un dégradé.

Afin d'illustrer les différents comportements associés aux images d'arrière-plan, l'image ci-dessous 👇 sera utilisée dans les exemples suivants.

Image

Voir le CodePen de Simon Arnold (@smnarnold).

Dégradés

À gauche, background-image: linear-gradient(#3FC774, #3C38BA); génère un dégradé linéaire de vert à bleu.

À droite, background-image: radial-gradient(#3FC774, #3C38BA); génère aussi un dégradé de vert à bleu, mais sous forme circulaire.

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bgi

Pour en savoir plus, voir ce billet sur les dégradés.

Pour en savoir plus, voir ces articles MDN sur linear-gradient et sur radial-gradient.

Combinaisons

Il est possible de donner plus d'une valeur d'image d'arrière-plan. Pour ce faire, il est nécessaire de séparer chaque valeur avec une virgule.

À gauche par exemple, deux images & sont passés en arrière-plan et se superposent.

Voir le CodePen de Simon Arnold (@smnarnold).

La première valeur passée à la propriété background-image correspond à l'élément sur le dessus et ainsi de suite.

Pour en savoir plus, voir cet article MDN à propos de background-image.

Background-repeat

La propriété background-repeat définit la façon dont une image en arrière-plan est répétée. Cette valeur accepte plusieurs valeurs:

  • repeat (par défaut)
  • no-repeat
  • repeat-x
  • repeat-y
  • Etc.

Repeat vs No-repeat

À gauche, background-repeat: repeat; indique de répéter l'image d'arrière-plan aussi souvent que nécessaire afin de couvrir l'ensemble de l'élément.

À droite, background-repeat: no-repeat; indique au contraire de ne pas répéter l'image d'arrière-plan.

Voir le CodePen de Simon Arnold (@smnarnold).

Repeat-x vs Repeat-y

À gauche, background-repeat: repeat-x; indique de répéter l'image d'arrière-plan sur l'axe des X uniquement ↔️.

Tandis qu'à droite, background-repeat: repeat-y; indique à l'opposé de répéter l'image d'arrière-plan sur l'axe des Y uniquement ↕️.

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bgr

Pour en savoir plus, voir cet article MDN à propos de background-repeat.

Background-position

La propriété background-position permet de définir la position d'un arrière-plan. Il est possible de définir deux valeurs correspondant à la position X et Y dudit arrière-plan dans son élément. Ces valeurs peuvent-être n'importe quelle unité CSS (px, %, em, etc.), ainsi que certains mots-clés (top, bottom, left, right).

À gauche, background-position: 75% 25%; positionne l'arrière-plan à 75% horizontalement et 25% verticalement.

Tandis qu'à droite, background-position: center bottom; positionne l'arrière-plan au centre et au bas de son élément.

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bgp

Pour en savoir plus, voir cet article MDN à propos de background-position.

Background-size

Par défaut, une image en arrière-plan affichera en fonction de sa dimension réelle. Cependant, la propriété background-size permet de contrôler la dimension de ladite image.

Unités CSS

Il est possible de définir deux valeurs, correspondant à la largeur et la hauteur de l'arrière-plan utilisé. Ces valeurs peuvent-être n'importe quelle unité CSS (px, %, em, etc.)

À gauche par exemple, background-size: 80px 40px; déforme l'arrière-plan qui normalement est carré. Tandis qu'à droite, background-size: 50% auto indique à l'image d'arrière-plan de prendre une demi-largeur et de s'ajuster automatiquement sur la hauteur afin de garder le ratio original de l'image.

Voir le CodePen de Simon Arnold (@smnarnold).

Contain vs Cover

À gauche, background-size: contain; garde le ratio de l'image d'arrière-plan intact et la redimensionne de sorte qu'elle soit entièrement visible dans l'élément. 🚫 rognage.

À droite, background-size: cover; garde aussi le ratio de l'image d'arrière-plan intact, mais la redimensionne de sorte que l'élément soit entièrement recouverte par elle. Quitte à rogner certaines parties de l'image.

Voir le CodePen de Simon Arnold (@smnarnold).

Raccourci Emmet: bgs

Pour en savoir plus, voir cet article MDN à propos de background-size.

Syntaxe courte

La propriété background permet de définir toutes les propriétés précédemment mentionnées en une seule ligne. Si la valeur d'une sous-propriété est omise, elle est alors considérée comme étant définie avec sa valeur par défaut.

Raccourci Emmet: bg

Pour en savoir plus, voir cet article MDN à propos de background.

Lea Verou 👩‍💻 a mis sur pied une collection d'arrière-plans CSS réalisés à partir de dégradés pouvant être utilisés sur des projets ou servir de source d'inspiration.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme