En CSS, une image peut servir de fond pour habiller un bloc, une bannière ou même toute une page. Nous allons voir cela en partant de background-image avant d'ajuster la taille, la position, la répétition et le comportement au scroll.
Introduction à la propriété background-image
Pour placer une image derrière le contenu d'un élément, on utilise la propriété background-image. On lui donne généralement une valeur avec la fonction url().
Voici la forme la plus simple :
<div class="banniere">
Mon titre
</div>
.banniere{
height: 180px;
background-image: url("../images/banner.jpg");
}
L'image se place derrière le contenu du bloc.
Attention ! Si votre élément est vide et n'a pas de hauteur, vous ne verrez rien. Il faut donc souvent prévoir une hauteur, du contenu ou des espacements internes avec la propriété padding, c'est-à-dire de l'espace entre le bord du bloc et son contenu, pour que le fond apparaisse.
Par défaut, l'image garde sa taille d'origine et peut se répéter pour remplir toute la zone disponible. Les propriétés suivantes servent justement à reprendre le contrôle.
Définir la taille de l'image de fond
La propriété background-size permet de dire comment l'image doit s'adapter à l'élément.
Vous pouvez d'abord utiliser des tailles classiques en px ou en %, puis passer à des valeurs plus pratiques comme contain ou cover.
Définir une taille en px ou en %
Avec une valeur en px, vous demandez une taille précise. Avec une valeur en %, vous demandez une taille relative à l'élément qui reçoit le fond.
Vous pouvez écrire une seule valeur, ou deux valeurs si vous voulez contrôler séparément la largeur et la hauteur.
.bloc_photo{
height: 180px;
background-image: url("../images/banner.jpg");
background-size: 250px 120px;
background-repeat: no-repeat;
}
.bloc_photo{
height: 180px;
background-image: url("../images/banner.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
}
Ici, l'image mesure exactement 250px de large et 120px de haut.
Ce type de valeur est utile quand vous voulez garder un contrôle très précis. En revanche, si le bloc change beaucoup de taille, une valeur fixe peut devenir moins souple.
Afficher toute l'image avec contain
La valeur contain redimensionne l'image pour qu'elle soit visible en entier dans le bloc. Elle n'est pas rognée, mais il peut rester des zones vides.
.carte{
height: 180px;
background-image: url("../images/banner.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #e8f3f6;
}
<div class="carte"></div>
Avec contain, l'image reste entièrement visible dans le bloc.
C'est une bonne solution si vous voulez absolument éviter qu'une partie de l'image disparaisse.
Remplir tout le bloc avec cover
La valeur cover agrandit ou réduit l'image pour qu'elle recouvre tout l'élément. Cette fois, il n'y a plus d'espace vide, mais une partie de l'image peut être coupée.
.banniere{
height: 180px;
background-image: url("../images/banner.jpg");
background-size: cover;
background-position: center;
}
<div class="banniere">Exemple avec cover</div>
Avec cover, l'image remplit tout le bloc, même si une partie est rognée.
Pour une bannière, un en-tête ou un grand fond décoratif, cover est souvent le choix le plus pratique.
Positionner l'image avec background-position
Quand l'image est rognée ou qu'elle ne remplit pas parfaitement le bloc, background-position permet de choisir la zone visible.
Vous pouvez utiliser des mots-clés comme left, center, right, top ou bottom. Vous pouvez aussi utiliser des pourcentages ou des pixels.
.banniere{
background-image: url("../images/banner.jpg");
background-size: cover;
background-position: center top;
}
.banniere{
background-image: url("../images/banner.jpg");
background-size: cover;
background-position: 70% 50%;
}
Ici, on demande au navigateur de privilégier la partie droite de l'image.
Cette propriété devient très utile avec background-size: cover, car une partie de l'image est souvent coupée. Avec un bon positionnement, vous gardez la zone importante visible.
Créer un pattern avec background-repeat
Par défaut, une image de fond se répète. C'est pratique pour créer un pattern, c'est-à-dire un petit motif répété.
La propriété background-repeat accepte notamment ces valeurs :
-
repeatpour répéter l'image horizontalement et verticalement. -
repeat-xpour répéter seulement sur l'axe horizontal. -
repeat-ypour répéter seulement sur l'axe vertical. -
no-repeatpour afficher l'image une seule fois.
.motif{
height: 180px;
background-image: url("../images/banana.svg");
background-size: 60px;
background-repeat: repeat;
}
.hero{
height: 180px;
background-image: url("../images/banner.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Une petite image répétée peut former un fond décoratif régulier.
Si vous utilisez une grande photo, vous choisirez souvent no-repeat. Si vous utilisez un petit motif, repeat peut au contraire être exactement l'effet recherché.
Gérer le scroll avec background-attachment
La propriété background-attachment indique si l'image doit défiler avec la page ou rester fixe.
-
scrollest la valeur par défaut. L'image suit le déplacement normal de la page. -
fixedgarde l'image immobile pendant que le contenu défile.
.section_photo{
height: 300px;
background-image: url("../images/banner.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
Faites défiler la page pour observer le comportement du fond.
Avec background-attachment: fixed, l'image semble rester immobile pendant que le contenu continue de défiler.
Cette démonstration illustre l'effet produit par un fond fixe.
Le résultat est souvent utilisé pour créer un effet visuel plus marqué sur une grande section.
Attention tout de même : l'effet de fixed n'est pas toujours identique sur mobile. Il vaut mieux le tester avant de le garder dans un vrai projet.
Regrouper toutes ces valeurs sur une seule ligne
Comme pour beaucoup de propriétés CSS, il existe une écriture raccourcie avec background. Elle permet de réunir plusieurs réglages au même endroit.
.banniere{
background: url("../images/banner.jpg") center / cover no-repeat fixed;
}
Dans cet exemple :
-
url("../images/banner.jpg")définit l'image, -
centerdéfinit la position, -
coverdéfinit la taille, -
no-repeatsupprime la répétition, -
fixedgère le défilement.
Le / sert à séparer background-position et background-size. Au début, vous pouvez continuer à écrire les propriétés séparément. C'est souvent plus lisible quand on apprend.
Définir plusieurs images de fond
Un même élément peut recevoir plusieurs images de fond. Pour cela, il suffit de séparer les valeurs par des virgules.
La première image écrite sera placée au-dessus des suivantes.
.carte_speciale{
height: 220px;
background-image:
url("../images/banana.svg"),
url("../images/banner.jpg");
background-repeat: no-repeat, no-repeat;
background-size: 70px, cover;
background-position: 20px 20px, center;
}
<div class="carte_speciale">
<p>Une carte avec deux fonds</p>
</div>
Le petit visuel est placé au-dessus de la photo de fond.
Cette technique est pratique pour ajouter une icône, une texture ou un élément décoratif sans modifier votre HTML.
À retenir
Pour afficher une image en fond, commencez par background-image. Ensuite, ajustez son comportement avec background-size, background-position, background-repeat et background-attachment. Quand vous serez plus à l'aise, vous pourrez tout regrouper dans background ou même empiler plusieurs images.