Arrière-plans

Podcast CSS – 053: Arrière-plan

Arrière-plans

Derrière chaque zone CSS se trouve une couche spécialisée appelée calque d'arrière-plan. Le CSS propose plusieurs méthodes pour apporter des modifications significatives, y compris autoriser plusieurs arrière-plans.

Les calques d'arrière-plan sont les plus éloignés de l'utilisateur et sont affichés derrière le contenu d'une boîte à partir de sa région padding-box. Cela permet au calque 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 puissiez appliquer à un calque d'arrière-plan consiste à définir la couleur. La valeur initiale de background-color est transparent, ce qui permet d'afficher le contenu d'un élément 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

En haut 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

Plusieurs fonctions CSS de dégradé existent pour vous permettre 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 obtenue est dimensionnée intrinsèquement pour correspondre à la quantité d'espace disponible.

Démonstration montrant comment appliquer une image de fond à l'aide de fonctions de dégradé:

Répétition des images de fond

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 cela en utilisant la propriété background-repeat avec l'une des valeurs suivantes:

• repeat: l'image est répétée dans l'espace disponible et est recadrée si nécessaire.
• round: l'image est répétée horizontalement et verticalement pour s'adapter à un maximum 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 se compresse pour ajouter d'autres instances d'image.
• space: l'image est répétée horizontalement et verticalement pour s'adapter à autant d'instances dans l'espace disponible sans être recadrée (en espérant 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, les espaces blancs étant répartis uniformément entre elles.

La propriété background-repeat vous permet de définir le comportement des axes x et y de manière indépendante. Le premier paramètre définit le comportement de répétition horizontale, et le second paramètre celui de la répétition verticale.

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

Le raccourci dispose également d'options pratiques en un mot pour rendre votre intention plus claire.

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

La démonstration suivante illustre les fonctionnalités de la propriété background-repeat:

Position de l'arrière-plan

Vous avez peut-être remarqué que lorsque le style de certaines images sur le Web est appliqué à l'aide d'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 le long des axes x et y de manière indépendante avec deux valeurs par défaut.

Lorsque vous utilisez des longueurs et des pourcentages CSS, le premier paramètre correspond à l'axe horizontal, tandis que le deuxième paramètre correspond à l'axe vertical.

Lorsque les 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 présente également un raccourci pratique à une valeur : la valeur omise renvoie 50%. Voici un exemple illustrant ce processus avec les mots clés acceptés par la propriété background-position:

En plus de sa forme par défaut (deux paramètres et une seule), 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 doit être précédé des mots clés top, left, right ou bottom pour que le navigateur puisse calculer de quel bord de la zone CSS le décalage doit provenir.

Lorsque trois paramètres sont utilisés, la longueur ou la valeur CSS peut être le deuxième ou le troisième paramètre, et les deux autres sont des mots clés. le mot clé réussi 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 d'arrière-plan CSS, l'image est placée en haut de la zone. La valeur 20% représente un décalage de 20% par rapport à la gauche de la zone (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). 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 de code 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, la taille des images de fond est définie en fonction de leur largeur, hauteur et format intrinsèques.

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, ce qui vous permet de modifier la largeur et la hauteur d'un arrière-plan indépendamment.

La propriété background-size accepte les mots clés suivants:

• auto: lorsqu'elle est utilisée de manière indépendante, 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 dimensionnée de façon à conserver les proportions naturelles 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: ajuste la taille de l'image pour qu'elle remplisse l'espace sans l'étirer ni la recadrer. Par conséquent, il peut rester de l'espace vide, ce qui entraînera la répétition de l'image, sauf si background-repeat est défini sur no-repeat.

Les deux dernières sont destinées à être utilisées de manière autonome, sans aucun autre paramètre.

La démonstration suivante présente ces mots clés en action:

Démonstration illustrant l'application de 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 à 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 davantage d'espace est nécessaire, les images se déplacent avec cet espace dans le calque d'arrière-plan, déterminé par les limites de la zone CSS.

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

Une fois que l'espace occupé initialement par les images du calque d'arrière-plan doit être défilé (ou affiché) hors écran, les images du calque d'arrière-plan restent fixes dans leur position d'origine, jusqu'à ce que l'ensemble du calque soit retiré de l'écran par la fenêtre d'affichage.

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 celui-ci s'affiche à l'intérieur et à l'extérieur des limites de la zone CSS (généralement en raison du défilement, des 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 boîte .

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

Extrait d'arrière-plan

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 qui peuvent être spécifiées sont border-box, padding-box et content-box, qui correspondent à l'endroit où un calque d'arrière-plan CSS peut être affiché. 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 recadré ou rogné.

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 visible dans le texte réel d'une zone CSS, celui-ci doit être partiellement ou complètement transparent.

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, le calque d'arrière-plan permet de définir plusieurs sous-calques. Par souci de concision, je ferai référence à ces sous-calques en tant qu'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é de l'utilisateur.

Le seul arrière-plan défini ou la dernière couche est désigné comme le dernier calque d'arrière-plan 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 associé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;

Raccourci de l'arrière-plan

Pour styliser plus facilement le calque d'arrière-plan d'une zone, en particulier lorsque plusieurs calques d'arrière-plan sont souhaités, il existe 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 qui consiste à déclarer plusieurs arrière-plans. Les valeurs de position et de taille doivent être indiquées et séparées par une barre oblique (/). En déclarant l'origine et le comportement du clip dans le bon ordre, vous pouvez définir des mots clés valides à la fois

La déclaration suivante coupe l'arrière-plan et provient du champ 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 déclarations précédentes liées à l'arrière-plan de l'extrait de code 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