Arrière-plans

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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:

À faire
background-position: left 50%;
À faire
background-position: top left;
À faire
background-position: left top;

L'ordre n'a pas d'importance pour les mots clés associés à différents axes de position.

À éviter
  background-position: 50% left;

Lorsque des valeurs CSS sont utilisées avec des mots clés, l'ordre est important. La première valeur représente l'axe horizontal et la seconde l'axe vertical.

À éviter
  background-position: left right;

Vous ne pouvez pas utiliser simultanément des mots clés associés à la même axe.

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.

À faire
background-position: bottom 88% right;
À faire
background-position: right bottom 88%;
À éviter
background-position: 88% bottom right;
La valeur de longueur CSS doit être précédée des mots clés top, right, bottom ou left lorsque vous utilisez trois paramètres ou plus.
À faire
background-position: bottom 88% right 33%;
À faire
background-position: right 33% bottom 88%;
À éviter
background-position: 88% 33% bottom left;
La valeur de longueur CSS doit être précédée des mots clés top, right, bottom ou left lorsque vous utilisez trois paramètres ou plus.

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

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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. 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 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 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 illustre ces mots clés en action:

Démonstration de l'application de ces mots clés à background-size:

Attachement en arrière-plan

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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.

Faux
Vrai

Les images de fond sont répétées par défaut.

Vrai
Faux

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