Background

La propriété background et 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érentes unités 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%)

Note

Tous les exemples ci-dessus ☝️ correspondent à la couleur verte, mais écrit dans des formats différents.

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

L'option la plus simple consiste à afficher une image.

Note

Remarquez comment l’image se répête par défaut

Dégradé

Il est possible de générer un dégradé à titre d'image d'arrière-plan en utilisant les fonctions CSS linear-gradient() et radial-gradient(). La première fonction génère un dégradé linéaire, tandis que la deuxième génère un dégradé circulaire.

Par exemple:

background-image: linear-gradient(#3FC774, #3C38BA);

Combinaison

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.

Par exemple:

background-image: url('dessus.jpg'), url('dessous.jpg');

Warning

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

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.

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 ↕️.

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.

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.

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.) ou encore le mot-clé auto, indiquant d'ajuster proportionnellement une dimension en fonction de l'autre.

Par exemple, l'image de référence, normalement carrée, peut-être déformée si deux valeurs ne correspondant pas à ses proportions d'origine lui sont attribuées, comme dans l'exemple de gauche avec background-size: 80px 40px;.

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.

Mots-clé En plus des unités CSS, la propriété background-size accepte aussi des mots-clé.

Par exemple, à 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.

Tandis qu'à 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.

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.

Par exemple:

.demo {
  background-image: url('image.png');
  background-size: 100px 100px;
  background-repeat: no-repeat;
}

Est équivalent à:

.demo {
  background: url('image.png') 100px 100px no-repeat;
}

Outils

CSS3 Patterns Gallery
Collection d’arrière-plans CSS réalisés à partir de dégradés pouvant être utilisés sur des projets.
CSS3 Patterns Gallery

Exercices

Background - Candy Crush
Pour cet exercice, vous devrez recréer des mises en page inspirées du jeux Candy Crush en mettant à profit vos connaissances sur la propriété CSS background.
Background - Candy Crush