Arrière-plans

Podcast CSS – 053: Contexte

Arrière-plans

Derrière chaque zone CSS se trouve une couche spécialisée appelée "couche d'arrière-plan". Vous pouvez le modifier de plusieurs façons, y compris en ajoutant plusieurs arrière-plans.

Les calques d'arrière-plan sont les plus éloignés de l'utilisateur et affichés derrière le contenu d'une boîte en commençant par sa région padding-box. Cela permet au calque d'arrière-plan de ne pas chevaucher du tout les bordures.

Couleur d'arrière-plan

L'un des effets les plus simples que vous pouvez appliquer à un calque d'arrière-plan est de définir la couleur. La valeur initiale de background-color est transparent, ce qui permet d'afficher le contenu d'un parent. Un jeu de couleurs valide sur un calque d'arrière-plan se trouve derrière les autres éléments peints sur cet élément.

Image de fond

Au-dessus du calque 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:

• Une URL d'image ou un URI de données utilisant 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

Arrière-plans en dégradé CSS

Il existe plusieurs fonctions CSS de dégradé qui vous permettent de générer une image de fond lorsqu'au moins deux couleurs sont transmises.

Quelle que soit la fonction de dégradé utilisée, l'image résultante est dimensionnée de façon intrinsèque pour correspondre à la quantité d'espace disponible.

Démonstration montrant un exemple d'application d'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 remplir tout l'espace du calque d'arrière-plan.

Modifiez ce paramètre en utilisant la propriété background-repeat avec l'une des valeurs suivantes:

• repeat: l'image se répète dans l'espace disponible, recadrée si nécessaire.
• round: l'image se répète horizontalement et verticalement pour tenir autant d'instances dans l'espace disponible. À mesure que l'espace disponible augmente, l'image s'étire. Après avoir étiré la moitié de sa largeur d'origine, elle est compressée afin d'ajouter des instances d'image supplémentaires.
• space: l'image se répète horizontalement et verticalement pour s'adapter à autant d'instances dans l'espace disponible sans être recadrée, ce qui permet d'espacer les instances de l'image si nécessaire. Les images répétées touchent les bords de l'espace occupé par un calque d'arrière-plan, avec un espace blanc réparti uniformément entre eux.

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 le comportement de répétition verticale.

Si vous utilisez une seule valeur, elle s'appliquera aux répétitions horizontales et verticales.

Le raccourci dispose également d'options pratiques en un seul mot pour clarifier votre intention.

La valeur repeat-x répète une image uniquement horizontalement. Cela équivaut à repeat no-repeat.

La démonstration suivante présente les 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, ces images s'affichent en haut à gauche de leur conteneur.

La position initiale des images de fond se trouve en haut à gauche. La propriété background-position vous permet de modifier ce comportement en décalant la position de l'image.

Comme pour background-repeat, la propriété background-position vous permet de positionner des images indépendamment le long des axes x et y avec deux valeurs par défaut.

Lorsque des longueurs et des pourcentages CSS sont utilisés, le premier paramètre correspond à l'axe horizontal et le second à l'axe vertical.

Lorsque des mots clés sont utilisés uniquement, l'ordre des mots clés 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 comporte également un raccourci pratique pour une valeur. La valeur omise est résolue en 50%. Voici un exemple qui illustre l'utilisation des mots clés acceptés par la propriété background-position:

En plus de son formulaire par défaut à deux et un format, la propriété background-position accepte également jusqu'à quatre paramètres.

Lorsque vous utilisez trois ou quatre paramètres, une longueur ou un pourcentage CSS doit être précédé des mots clés top, left, right ou bottom pour que le navigateur puisse calculer le bord de la zone CSS d'où doit provenir le décalage.

Lorsque trois paramètres sont utilisés, une longueur ou une valeur CSS peut constituer le deuxième ou le troisième paramètre, les deux autres étant des mots clés. Le mot clé qui aboutit est utilisé pour déterminer l'arête 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, celle-ci est placée en haut du cadre. La valeur 20% représente un décalage de 20% par rapport à la gauche de la zone (sur l'axe X).

Si vous appliquez background-position: top 20% left à 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, elles sont redimensionné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 CSS et de pourcentage ou des mots clés spécifiques. La propriété accepte jusqu'à deux paramètres qui vous permettent 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'elle est utilisée indépendamment, l'image de fond est dimensionnée en fonction de sa largeur et de sa hauteur intrinsèques. Lorsque auto est utilisé avec une autre valeur CSS pour la largeur (premier paramètre) ou la hauteur (deuxième paramètre), la dimension définie sur auto est redimensionnée selon les besoins afin de 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 du calque d'arrière-plan. Cela peut signifier que l'image est étirée ou recadrée.
• contain: adapte l'image à la taille de 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 si background-repeat est défini sur no-repeat.

Les deux derniers sont destinés à être utilisés de manière autonome, sans autre paramètre.

La démonstration suivante présente l'utilisation de ces mots clés:

Démonstration montrant comment appliquer ces mots clés à background-size:

Pièce jointe 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 d'arrière-plan) une fois que le calque est visible sur un écran.

Elle 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 avec cet espace dans la couche d'arrière-plan déterminée par les limites de la zone CSS.

L'utilisation de la valeur fixed définit la position des images de fond par rapport à la fenêtre d'affichage.

Une fois que l'espace des images du calque d'arrière-plan doit initialement être défilé (ou affiché) hors écran, les images du calque d'arrière-plan restent fixes dans leur position d'origine. Le calque d'arrière-plan leur a permis de le faire jusqu'à ce que la fenêtre d'affichage fasse défiler l'ensemble du calque en dehors de l'écran.

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 le long de 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 du défilement, de transformations 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ée à une zone spécifique. Les valeurs acceptées par la propriété correspondent aux régions border-box, padding-box et content-box d'une zone de texte .

Essayez ces options à l'aide de la démo suivante:

Extrait en arrière-plan

La propriété background-clip contrôle ce qui s'affiche visuellement depuis un calque d'arrière-plan, quelles que soient les limites créées par la propriété background-origin.

Comme background-origin, les régions pouvant être spécifiées sont border-box, padding-box et content-box. Elles correspondent à l'endroit où un calque d'arrière-plan CSS peut être affiché. Si vous utilisez ces mots clés, l'affichage de l'arrière-plan au-delà de la zone spécifiée sera rogné ou tronqué.

La propriété background-clip accepte également un mot clé text qui rogne l'arrière-plan pour qu'il ne dépasse pas le texte de la zone de contenu. Pour que cet effet soit évident dans le texte même d'une zone CSS, le texte doit être partiellement ou complètement transparent.

Il s'agit d'une propriété relativement nouvelle. Au moment de la rédaction de ce document, Chrome et la plupart des navigateurs nécessitent le préfixe -webkit- pour l'utiliser.

Arrière-plans multiples

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 désignerai ces sous-couches comme étant des arrière-plans.

Plusieurs arrière-plans sont définis de haut en bas. Le premier arrière-plan 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 le calque d'arrière-plan final par le navigateur. Seul ce calque est autorisé à 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 ligne 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;

Raccourci d'arrière-plan

Pour faciliter le stylisation du calque d'arrière-plan d'une case, en particulier lorsque plusieurs calques d'arrière-plan sont souhaités, un raccourci 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 d'arrière-plans multiples. Les valeurs de position et de taille doivent être renseignées toutes les deux, séparées par une barre oblique (/). Si vous déclarez l'origine et le comportement de l'extrait dans le bon ordre, vous pourrez définir des mots clés valides pour ces deux éléments simultanément.

La déclaration suivante extrait l'arrière-plan et provient de la zone de contenu:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

En gardant à l'esprit cette sémantique abrégée, les précédentes déclarations de l'extrait de code liées à l'arrière-plan pourraient ê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 ;

Testez vos connaissances

Tester vos connaissances sur les arrière-plans CSS