The CSS Podcast - 053: Background
Derrière chaque boîte CSS se trouve une couche spécialisée appelée couche d'arrière-plan. Le CSS propose différentes façons d'apporter des modifications significatives, y compris en autorisant plusieurs arrière-plans.
Les calques d'arrière-plan sont les plus éloignés de l'utilisateur. Ils sont affichés derrière le contenu d'une boîte à partir de sa région padding-box
. Cela permet à la couche d'arrière-plan de ne pas chevaucher les bordures.
Couleur de l'arrière-plan
L'un des effets les plus simples que vous pouvez appliquer à une couche d'arrière-plan est de définir la couleur. La valeur initiale de background-color
est transparent
, ce qui permet de rendre le contenu d'un parent visible. Une couleur valide définie sur un calque d'arrière-plan se trouve derrière les autres éléments peints sur cet élément.
Image de fond
Sur la couche background-color
, vous pouvez ajouter une image de fond à l'aide de la propriété background-image
. Un background-image
accepte les éléments suivants:
- URL d'une image ou URI de données à l'aide de la fonction CSS
url
. - Image créée dynamiquement par une fonction CSS de dégradé.
Définir une image de fond avec la fonction CSS url
Fond dégradé CSS
Plusieurs fonctions CSS de dégradé existent pour vous permettre de générer une image de fond lorsque vous transmettez deux couleurs ou plus.
Quelle que soit la fonction de dégradé utilisée, l'image obtenue est adaptée de manière intrinsèque à la quantité d'espace disponible.
Démonstration montrant comment appliquer une image de fond à l'aide de fonctions de dégradé:
Images de fond répétées
Par défaut, les images de fond se répètent horizontalement et verticalement pour occuper tout l'espace de la couche d'arrière-plan.
Pour modifier cela, utilisez la propriété background-repeat
avec l'une des valeurs suivantes:
repeat
: l'image se répète dans l'espace disponible, en la recadrant si nécessaire.round
: l'image se répète horizontalement et verticalement pour s'adapter à autant d'instances que possible dans l'espace disponible. À mesure que l'espace disponible augmente, l'image s'étire, puis se compresse pour ajouter d'autres instances d'image après avoir atteint la moitié de sa largeur d'origine.space
: l'image se répète horizontalement et verticalement pour s'adapter à autant d'instances que possible dans l'espace disponible, sans la recadrer. Les instances de l'image sont espacées selon les besoins. Les images répétées touchent les bords de l'espace occupé par une couche d'arrière-plan, avec un espace négatif réparti uniformément entre elles.
La propriété background-repeat
vous permet de définir le comportement des axes X et Y indépendamment. Le premier paramètre définit le comportement de répétition horizontale, et le second paramètre définit le comportement de répétition verticale.
Si vous utilisez une seule valeur, elle s'applique aux répétitions horizontales et verticales.
Le raccourci propose également des options pratiques d'un seul mot pour clarifier votre intention.
La valeur repeat-x
ne répète une image que horizontalement. Elle est équivalente à repeat no-repeat
.
La démonstration suivante illustre ces fonctionnalités de la propriété background-repeat
:
Position de l'arrière-plan
Vous avez peut-être remarqué que lorsque certaines images sur le Web sont stylisées avec une déclaration background-repeat: no-repeat
, elles s'affichent en haut à gauche de leur conteneur.
La position initiale des images de fond est en haut à gauche. La propriété background-position
vous permet de modifier ce comportement en décalant la position de l'image.
Comme avec background-repeat
, la propriété background-position
vous permet de positionner les images sur les axes X et Y indépendamment, avec deux valeurs par défaut.
Lorsque des longueurs et des pourcentages CSS sont utilisés, le premier paramètre correspond à l'axe horizontal, tandis que le second correspond à l'axe vertical.
Lorsque vous n'utilisez que des mots clés, leur ordre n'a pas d'importance:
background-position: left 50%;
background-position: top left;
background-position: left top;
background-position: 50% left;
background-position: left right;
La propriété background-position
dispose également d'un raccourci pratique à valeur unique. La valeur omise est remplacée par 50%
. Voici un exemple qui illustre cela à l'aide des mots clés acceptés par la propriété background-position
:
En plus de sa forme par défaut à deux paramètres et à un paramètre, la propriété background-position
accepte également jusqu'à quatre paramètres.
Lorsque trois ou quatre paramètres sont utilisés, une longueur ou un pourcentage CSS doivent être précédés des mots clés top
, left
, right
ou bottom
pour que le navigateur puisse calculer à partir de quel bord de la zone CSS le décalage doit provenir.
Lorsque trois paramètres sont utilisés, une longueur ou une valeur CSS peut être le deuxième ou le troisième paramètre, les deux autres étant des mots clés. Le mot clé qui suit sera utilisé pour déterminer le bord dont la longueur ou la valeur CSS correspond au décalage. Le décalage de l'autre mot clé spécifié est défini sur 0.
background-position: bottom 88% right;
background-position: right bottom 88%;
background-position: 88% bottom right;
background-position: bottom 88% right 33%;
background-position: right 33% bottom 88%;
background-position: 88% 33% bottom left;
Si background-position: top left 20%
est appliqué à une image de fond CSS, l'image est placée en haut de la boîte. La valeur 20%
représente un décalage de 20% par rapport à la gauche de la boîte (sur l'axe X).
Si background-position: top 20% left
est appliqué à une image de fond CSS, la valeur de 20% représente un décalage de 20% par rapport au haut de la zone CSS (sur l'axe Y), et l'image est placée à gauche de la zone.
Lorsque quatre paramètres sont utilisés, les deux mots clés sont associés à deux valeurs correspondant à un décalage par rapport aux origines de chaque mot clé spécifié. Si background-position: bottom 20% right 30%
est appliqué à une image de fond, celle-ci est positionnée à 20% du bas et à 30% de la droite de la zone CSS.
La démonstration suivante illustre ce comportement:
Voici d'autres exemples d'utilisation de la propriété background-position
avec une combinaison de valeurs CSS et de mots clés:
Taille de l'arrière-plan
La propriété background-size
définit la taille des images de fond. Par défaut, les images de fond sont dimensionnées en fonction de leur largeur, de leur hauteur et de leur format intrinsèques (réels).
La propriété background-size
utilise des valeurs de longueur et de pourcentage CSS ou des mots clés spécifiques. Cette propriété accepte jusqu'à deux paramètres, ce qui vous permet de modifier indépendamment la largeur et la hauteur d'un arrière-plan.
La propriété background-size
accepte les mots clés suivants:
auto
: lorsqu'il est utilisé indépendamment, l'image de fond est redimensionnée en fonction de sa largeur et de sa hauteur intrinsèques. Lorsqueauto
est utilisé avec une autre valeur CSS pour la largeur (premier paramètre) ou la hauteur (deuxième paramètre), la dimension définie surauto
est redimensionnée si nécessaire pour conserver le format naturel de l'image. Il s'agit du comportement par défaut de la propriétébackground-size
.cover
: couvre toute la zone de la couche d'arrière-plan. Cela peut signifier que l'image est mise à l'échelle ou recadrée.contain
: permet de redimensionner l'image pour qu'elle remplisse l'espace sans l'étirer ni la recadrer. Par conséquent, un espace vide peut rester, ce qui entraînera la répétition de l'image, sauf sibackground-repeat
est défini surno-repeat
.
Les deux derniers sont destinés à être utilisés de manière autonome, sans autre paramètre.
La démonstration suivante illustre ces mots clés en action:
Démonstration de l'application de ces mots clés à background-size
:
Attachement en arrière-plan
La propriété background-attachment
vous permet de modifier le comportement de position fixe des images de fond (images faisant partie d'un calque de fond) une fois que le calque est visible à l'écran.
Il accepte trois mots clés: scroll
, fixed
et local
.
Le comportement par défaut de la propriété background-attachment
est la valeur initiale de scroll
. Lorsque plus d'espace est nécessaire, les images se déplacent dans cet espace au sein de la couche d'arrière-plan déterminée par les limites de la zone CSS.
La valeur fixed
fixe la position des images de fond dans le viewport.
Une fois que l'espace occupé par les images de la couche de fond doit être défilé (ou affiché) hors écran, les images de la couche de fond restent fixes à la position d'origine que la couche de fond leur a permis d'atteindre jusqu'à ce que l'intégralité de la couche soit défilée hors écran par le viewport.
Le mot clé local
permet de fixer la position des images de fond par rapport au contenu de l'élément. Les images de fond se déplacent désormais dans l'espace qu'elles occupent, car cet espace s'affiche à l'intérieur et à l'extérieur des limites de la zone CSS (généralement en raison de transformations de défilement, 2D ou 3D).
Origine de l'arrière-plan
La propriété background-origin
vous permet de modifier la zone des arrière-plans associés à une zone spécifique. Les valeurs acceptées par la propriété correspondent aux régions border-box
, padding-box
et content-box
d'un cadre .
Essayez ces options à l'aide de la démonstration suivante:
Clip de fond
La propriété background-clip
contrôle ce qui est visible à partir d'un calque d'arrière-plan, quelles que soient les limites créées par la propriété background-origin
.
Comme pour background-origin
, les régions pouvant être spécifiées sont border-box
, padding-box
et content-box
, qui correspondent à l'emplacement où une couche de fond CSS peut être affichée. Lorsque ces mots clés sont utilisés, tout rendu de l'arrière-plan au-delà de la région spécifiée est rogné ou coupé.
La propriété background-clip
accepte également un mot clé text
qui limite l'arrière-plan à la taille du texte dans la zone de contenu. Pour que cet effet soit visible dans le texte d'une zone CSS, le texte doit être partiellement ou totalement transparent.
Il s'agit d'une propriété relativement récente. Au moment de la rédaction de cet article, Chrome et la plupart des navigateurs nécessitent le préfixe -webkit-
pour l'utiliser.
Plusieurs arrière-plans
Comme indiqué au début du module, la couche d'arrière-plan permet de définir plusieurs sous-couches. Par souci de concision, je vais désigner ces sous-couches comme des arrière-plans.
Plusieurs arrière-plans sont définis de haut en bas : le premier est le plus proche de l'utilisateur, tandis que le dernier est le plus éloigné.
Le seul arrière-plan défini ou la dernière couche est désigné comme couche d'arrière-plan finale par le navigateur. Seule cette couche est autorisée à attribuer un background-color
.
Vous pouvez configurer plusieurs calques individuellement à l'aide de la plupart des propriétés CSS liées à l'arrière-plan, séparées par une virgule, comme illustré dans l'extrait de code et la démonstration en direct ci-dessous.
background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
url("https://assets.codepen.io/7518/blob.svg"),
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%, 0% 0%;
background-origin: padding-box, border-box, content-box;
Abréviation d'arrière-plan
Pour faciliter l'ajout de style à la couche d'arrière-plan d'une boîte, en particulier lorsque plusieurs couches d'arrière-plan sont souhaitées, vous pouvez utiliser un raccourci qui suit le modèle spécifique suivant:
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?
L'ordre est important dans la forme abrégée de déclaration de plusieurs arrière-plans. Les valeurs de position et de taille doivent toutes deux être fournies, séparées par une barre oblique (/
). Déclarer l'origine et le comportement de découpage dans le bon ordre vous permet de définir des mots clés valides pour les deux simultanément.
La déclaration suivante découpe l'arrière-plan et l'origine à partir de la zone de contenu:
background: url("https://assets.codepen.io/7518/blob.svg") 50%
50% / contain no-repeat content-box;
Compte tenu de ces sémantiques abrégées, les déclarations précédentes liées à l'arrière-plan de l'extrait de code peuvent être réécrites comme suit:
background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;
Vérifier vos connaissances
Tester vos connaissances sur les arrière-plans CSS
Les images de fond sont positionnées en haut à gauche d'une zone CSS.
Les images de fond sont répétées par défaut.
Quelles déclarations background-position
sont valides ?
background-position: 50% left
background-position: right bottom
background-position: top right 33%
background-position: left
Pour définir une image d'arrière-plan fixe dans un viewport, procédez comme suit:
background-position: fixed
background-attachment: fixed
background-attachment: scroll
background-fixed-to-viewport: true
La valeur par défaut de background-origin pour un arrière-plan dans une zone CSS est la suivante:
padding-box
content-box
margin-box
border-box