Background
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érentes unités de couleur.
Par exemple:
Nom, ex:
greenCode hexadécimal (hex), ex:
#3FC774RGB, ex:
rgb(63, 199, 116)RGBA, ex:
rgba(63, 199, 116, 1)HSL, ex:
hsl(143, 55%, 51%)
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.
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);À gauche, un dégradé linéaire.
À droite, un dégradé radial.
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');À gauche, deux image se superposent.
À droite, une image et un dégradé se superposent.
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-repeatrepeat-xrepeat-yEtc.
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.
À gauche, l’image se répète.
À droite, l’image ne s’affiche qu’une seule fois.
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 ↕️.
À gauche, l’image se répète à l’horizontale.
À droite, l’image se répète à la verticale.
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.
À gauche, l’image est déformée.
À droite, l’image est redimensionnée proportionnellement.
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.
À gauche, l’image est entièrement visible.
À droite, l’image est rognée, mais couvre entièrement son élément.
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;
}