CSS - Multiple Backgrounds

Salut à toi, futurs designers web ! Aujourd'hui, nous allons plonger dans l'univers passionnant des arrières-plans multiples en CSS. En tant que votre professeur d'informatique du coin, je suis là pour vous guider à travers ce voyage avec plein d'exemples et d'explications. Alors, prends ta boisson favorite, et c'est parti !

Syntaxe

Avant de sauter dedans, penchons-nous sur les bases. La syntaxe pour utiliser des arrières-plans multiples en CSS est assez simple :

selecteur {
background: background1, background2, ..., backgroundN;
}

Chaque arrière-plan est séparé par une virgule, et ils sont superposés du premier au dernier. Le premier arrière-plan que vous indiquez sera en haut, et le dernier sera en bas. C'est comme empiler des pancakes - celui que vous mettez premier sur l'assiette finit en haut !

CSS Multiple Backgrounds - Utilisation de la propriété background-image

Commençons par un exemple simple en utilisant la propriété background-image :

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

Dans cet exemple, nous appliquons deux images d'arrière-plan à un élément. top-image.png sera placée en haut et ne se répètera pas, tandis que bottom-image.png sera en dessous et se répètera. L'image du haut sera centrée, et l'image du bas commencera à partir du coin supérieur gauche.

CSS Multiple Backgrounds - Utilisation de la propriété background-size

Voyons maintenant comment nous pouvons contrôler la taille de nos images d'arrière-plan :

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

Ici, nous définissons la taille de small-icon.png à 50x50 pixels, tandis que large-pattern.png couvrira tout l'élément. C'est génial pour combiner un petit logo ou icône avec un grand motif d'arrière-plan.

CSS Multiple Backgrounds - Utilisation de la propriété background

La propriété raccourcie background nous permet de définir toutes les propriétés d'arrière-plan en une fois :

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

Cet exemple combine une image avec un arrière-plan dégradé. L'image est centrée et dimensionnée à 100px, tandis que le dégradé couvre tout l'élément. C'est comme mettre une cerise sur un sundae coloré !

CSS Multiple Backgrounds - Image en pleine taille

Parfois, vous voulez qu'une image couvre tout l'arrière-plan :

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

Cela crée un arrière-plan en pleine taille avec une superposition semi-transparente. C'est parfait pour créer des sections hero ou des arrière-plans de pleine page.

CSS Multiple Backgrounds - Image Hero

Parlons des sections hero, voici comment en créer une :

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

Cela crée une section hero avec une image d'arrière-plan et une superposition de dégradé qui fond de gauche à droite. C'est comme préparer la scène pour l'inauguration de votre site web !

CSS Multiple Backgrounds - Utilisation de la propriété background-origin

La propriété background-origin détermine où l'image d'arrière-plan est positionnée :

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px dashed black;
padding: 20px;
}

Cette propriété peut être particulièrement utile lorsque vous voulez contrôler exactement où commence votre arrière-plan en relation avec le modèle de boîte de l'élément.

CSS Multiple Backgrounds - Utilisation de la propriété background-clip

La propriété background-clip définit jusqu'où s'étend l'arrière-plan :

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px solid rgba(0,0,0,0.5);
padding: 20px;
}

Cela vous permet de rogner l'arrière-plan à différentes parties du modèle de boîte, créant des effets de superposition intéressants.

CSS Multiple Backgrounds - Propriétés connexes

Voici un tableau des propriétés connexes que vous pouvez utiliser avec des arrières-plans multiples :

Propriété	Description
background-image	Définit une ou plusieurs images d'arrière-plan
background-position	Définit la position de départ de chaque image d'arrière-plan
background-size	Spécifie la taille des images d'arrière-plan
background-repeat	Définit comment les images d'arrière-plan sont répétées
background-origin	Spécifie la zone de positionnement des images d'arrière-plan
background-clip	Définit jusqu'où s'étend l'arrière-plan à l'intérieur de l'élément
background-attachment	Définit si une image d'arrière-plan défile avec le reste de la page ou est fixe

N'oubliez pas, vous pouvez utiliser ces propriétés individuellement ou les combiner dans la propriété raccourcie background pour un code plus concis.

Et voilà, les amis ! Vous êtes maintenant équipés des connaissances pour créer des arrières-plans multicouches époustouflants en CSS. Souvenez-vous, la pratique rend parfait, alors n'ayez pas peur d'expérimenter avec ces propriétés. Qui sait ? Vous pourriez bien créer la prochaine grande tendance en conception web !

Bonne programmation, et que vos arrières-plans soient toujours superposés à la perfection !

Credits: Image by storyset