BackgroundLa 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.
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%)
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:
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:
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 ↕️.
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.
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.
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:
Est équivalent à: