CSS - Arrière-plans

Propriétés de fond

background-color: red;

background-color: rgb(255, 0, 0);

background-color: #ff0000;

background-color: hsl(0, 100%, 50%);

background-color: rgba(255, 0, 0, 0.5);

background-image: url('image.jpg');

background-image: url('image1.jpg'), url('image2.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: top right;

background-position: 50% 50%;

background-position: 100px 200px;

background-size: 200px 300px;

background-size: 50% 50%;

background-origin: border-box;

background-clip: padding-box;

Propriété abrégée de l'arrière-plan

La propriété abrégée background vous permet de définir plusieurs propriétés d'arrière-plan en une seule déclaration. Cela peut rendre votre code CSS plus court et plus facile à lire.

L'ordre des valeurs dans la propriété abrégée est :

background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> / <background-size>;

Vous pouvez combiner ces propriétés d'arrière-plan :

background-color: #ff0000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

En une seule déclaration abrégée :

background: #ff0000 url('image.jpg') no-repeat fixed center / cover;

Notez que la valeur background-size est séparée de la valeur background-position par une barre oblique (/).

Lorsque vous utilisez la propriété abrégée, toutes les valeurs omises seront définies à leurs valeurs par défaut. Si vous voulez que toutes les propriétés d'arrière-plan soient explicitement définies, incluez toutes les valeurs nécessaires dans la déclaration abrégée.

L'utilisation de la propriété abrégée background peut aider à simplifier votre code CSS et le rendre plus facile à maintenir. Cependant, si vous n'avez besoin de définir qu'une ou deux propriétés d'arrière-plan, il peut être plus lisible d'utiliser des propriétés individuelles plutôt que la forme abrégée.

Arrière-plans multiples

Le CSS vous permet de superposer plusieurs images d'arrière-plan sur un seul élément. Cette technique peut créer des effets visuels intéressants et ajouter de la profondeur à vos designs.

Pour spécifier plusieurs images d'arrière-plan, vous pouvez utiliser une liste de valeurs d'images d'arrière-plan séparées par des virgules dans la propriété background-image ou la propriété abrégée background.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
}

Vous pouvez également combiner plusieurs images d'arrière-plan avec d'autres propriétés. Lorsque vous utilisez la propriété abrégée background, les valeurs pour chaque couche sont séparées par des virgules.

.element {
  background: url('image1.jpg') no-repeat center, 
              url('image2.jpg') repeat-x top;
}

Vous pouvez aussi spécifier différentes tailles, positions et autres propriétés pour chaque couche.

.element {
  background: url('image1.jpg') no-repeat center/cover,
              url('image2.jpg') repeat-x top/50% auto;
}

Lorsque vous utilisez plusieurs arrière-plans, la première image spécifiée sera au-dessus. Les images suivantes seront superposées en dessous dans l'ordre où elles sont déclarées.

Les arrière-plans multiples vous offrent des options pour créer des designs visuellement riches en utilisant CSS. Expérimentez avec différentes combinaisons d'images, de positions, de tailles et d'autres propriétés pour obtenir les effets souhaités.

Dégradés d'arrière-plan

Le CSS vous permet de créer des transitions de couleurs appelées dégradés pour les arrière-plans. Vous pouvez créer des dégradés linéaires ou radiaux sans utiliser de fichiers image, ce qui permet des temps de chargement plus rapides.

Pour créer un dégradé linéaire, utilisez la fonction linear-gradient() comme valeur pour la propriété background ou background-image. Spécifiez la direction du dégradé et les couleurs entre lesquelles vous souhaitez faire la transition.

.element {
  background: linear-gradient(to right, red, blue);
}

Cela crée un dégradé qui passe du rouge à gauche au bleu à droite. Vous pouvez spécifier la direction en utilisant des mots-clés comme to top, to bottom, to left, to right, ou un angle en degrés.

Les points d'arrêt de couleur contrôlent où se produit chaque transition de couleur. Par défaut, les transitions sont espacées uniformément, mais vous pouvez spécifier des pourcentages ou des longueurs pour contrôler leurs positions.

.element {
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);
}

Pour créer un dégradé radial, utilisez la fonction radial-gradient(). Spécifiez la position centrale, la forme (cercle ou ellipse), et les points d'arrêt de couleur.

.element {
  background: radial-gradient(circle at center, red, blue);
}

Cela crée un dégradé circulaire centré dans l'élément qui passe du rouge au centre au bleu sur les bords.

Vous pouvez créer des dégradés plus complexes en spécifiant plusieurs points d'arrêt de couleur et en utilisant la transparence.

.element {
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}

Les dégradés peuvent être combinés avec d'autres propriétés d'arrière-plan comme background-size et background-repeat pour créer divers effets.

.element { 
  background: repeating-linear-gradient(45deg, red, blue 10%);
} 

Les dégradés CSS offrent un moyen de créer des arrière-plans visuellement attrayants sans dépendre de fichiers image. Expérimentez avec différentes couleurs, directions et points d'arrêt de couleur pour obtenir les effets souhaités.

Fusion d'arrière-plan

La propriété background-blend-mode en CSS vous permet de mélanger des images d'arrière-plan et des couleurs dans un élément. Cela crée des effets visuels en combinant plusieurs arrière-plans en utilisant différents modes de fusion.

Les modes de fusion disponibles sont :

• normal : Le mode par défaut ; aucune fusion n'est appliquée.
• multiply : Multiplie la couleur d'arrière-plan avec l'image, résultant en un effet plus sombre.
• screen : Multiplie l'inverse de la couleur d'arrière-plan avec l'image, résultant en un effet plus clair.
• overlay : Applique une combinaison de multiply et screen basée sur la couleur d'arrière-plan.
• darken : Sélectionne les valeurs de couleur plus foncées de l'image et de la couleur d'arrière-plan.
• lighten : Sélectionne les valeurs de couleur plus claires de l'image et de la couleur d'arrière-plan.

Les autres modes de fusion incluent : color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, et luminosity.

Pour utiliser la fusion d'arrière-plan, appliquez plusieurs arrière-plans à un élément, puis spécifiez le mode de fusion souhaité avec la propriété.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-blend-mode: multiply;
}

Vous pouvez également mélanger des images avec des couleurs.

.element {
  background: url('image.jpg'), #ff0000;
  background-blend-mode: screen;
}

Si vous avez plusieurs arrière-plans, vous pouvez spécifier plusieurs modes pour chaque couche.

.element {
  background: url('image1.jpg'), url('image2.jpg'), #ff0000;
  background-blend-mode: multiply, overlay;
}

La fusion d'arrière-plan ouvre de nombreuses possibilités créatives pour combiner des images et des couleurs. L'expérimentation vous aidera à obtenir les effets souhaités.

Opacité de l'arrière-plan

L'opacité des couleurs et des images d'arrière-plan en CSS peut être contrôlée en utilisant la propriété opacity ou en utilisant des valeurs de couleur RGBA ou HSLA.

La propriété opacity définit l'opacité globale d'un élément, y compris son contenu et son arrière-plan. Elle prend une valeur entre 0 (entièrement transparent) et 1 (entièrement opaque).

.element {
  background-color: #ff0000;
  opacity: 0.5;
}

Cependant, l'utilisation de la propriété opacity affecte l'élément entier, y compris son contenu. Si vous voulez contrôler uniquement l'opacité de la couleur ou de l'image d'arrière-plan sans affecter le contenu, vous pouvez utiliser des valeurs de couleur RGBA ou HSLA.

RGBA signifie Rouge, Vert, Bleu, Alpha ; où alpha représente l'opacité. HSLA signifie Teinte, Saturation, Luminosité, Alpha ; avec alpha servant le même objectif.

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

Vous pouvez également utiliser des valeurs de couleur RGBA ou HSLA avec des images d'arrière-plan.

.element {
  background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), 
                    url('image.jpg');
}

L'utilisation de RGBA ou HSLA vous permet de contrôler la transparence indépendamment du contenu, offrant ainsi une flexibilité pour créer des designs visuellement intéressants.

Motifs de fond

Les motifs de fond ajoutent de la texture et de l'intérêt visuel à vos pages web. Vous pouvez créer des motifs de fond répétitifs en utilisant de petites images et des techniques CSS pour une répétition sans couture.

Pour créer un motif de fond répétitif, commencez par sélectionner ou créer une petite image qui peut être carrelée de manière transparente. L'image doit avoir des bords qui s'alignent lorsqu'elle est répétée horizontalement et verticalement.

.element {
  background-image: url('pattern.png');
  background-repeat: repeat;
}

.element {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

.element {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
                    url('pattern.png');
  background-repeat: repeat;
}

Images de fond responsives

Le design web responsive offre une expérience utilisateur optimale sur tous les appareils. L'utilisation d'images de fond responsives consiste à fournir des tailles et des résolutions d'images appropriées en fonction de la taille de l'écran de l'utilisateur.

Une technique consiste à servir différents fichiers d'images en fonction de la taille de l'écran de l'appareil. Vous pouvez définir plusieurs propriétés background-image en utilisant des media queries.

.element {
  background-image: url('small-image.jpg');
}

@media (min-width: 768px) {
  .element {
    background-image: url('medium-image.jpg');
  }
}

@media (min-width: 1200px) {
  .element {
  background-image: url('large-image.jpg');
  }
}

.element {
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x
  );
}

.element {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
}

.element {
  background-image: url('pattern.svg');
}