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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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. 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 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 sibackground-repeat
est défini surno-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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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.
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Les images de fond sont positionnées dans l'angle supérieur gauche d'une zone CSS.
Les images de fond ne sont pas répétées par défaut.
Parmi les déclarations background-position
suivantes, lesquelles sont valides ?
background-position: 50% left
background-position: right bottom
background-position: top right 33%
background-position: left
Pour que l'image de fond soit fixe dans une fenêtre d'affichage, procédez comme suit:
background-attachment: scroll
background-attachment: fixed
background-position: fixed
background-fixed-to-viewport: true
L'origine de l'arrière-plan par défaut d'un arrière-plan dans une zone CSS est la suivante:
margin-box
padding-box
border-box
content-box