En CSS, il est possible d'utiliser n'importe quelle image comme fond d'un élément. La propriété background-image est le point de départ, mais elle s'accompagne de plusieurs autres propriétés qui permettent de contrôler précisément comment cette image se comporte : sa taille, sa position, sa répétition et bien plus encore.
La propriété background-image
Pour appliquer une image en fond d'un élément, on utilise la propriété background-image. Sa valeur est une URL pointant vers l'image souhaitée, entourée de la fonction url().
<div class="hero"></div>
.hero {
width: 100%;
height: 300px;
background-image: url("../images/paysage.jpg");
}
Par défaut, si l'image est plus petite que l'élément, elle se répète automatiquement pour remplir tout l'espace disponible. C'est le comportement naturel du navigateur, et nous verrons plus loin comment le modifier.
Attention ! La balise doit avoir une hauteur définie pour que l'image de fond soit visible. Un élément vide sans hauteur ne s'affichera pas, même avec un fond.
background-attachment : fixer l'image ou la laisser défiler
La propriété background-attachment contrôle si l'image de fond défile avec la page ou reste fixe pendant le scroll.
Elle accepte deux valeurs principales :
-
scroll: l'image défile avec le contenu de la page. C'est la valeur par défaut. -
fixed: l'image reste fixe pendant que la page défile. Cela crée un effet de parallaxe.
.hero {
background-image: url("../images/paysage.jpg");
background-attachment: fixed;
}
L'effet fixed est souvent utilisé pour les grandes images de fond ou les sections d'en-tête visuellement impactantes.
background-size : définir la taille de l'image de fond
Par défaut, l'image s'affiche à sa taille réelle. Pour l'adapter à l'élément, on utilise background-size.
Les valeurs les plus utiles sont :
-
cover: l'image couvre entièrement l'élément, sans laisser d'espace vide. Elle peut être rognée si ses proportions ne correspondent pas. -
contain: l'image est redimensionnée pour être entièrement visible dans l'élément, sans être rognée. Des espaces vides peuvent apparaître. -
Une valeur en pixels ou en pourcentage, par exemple
100%ou400px 200px.
<div class="hero"></div>
.hero {
background-image: url("../images/paysage.jpg");
background-size: cover;
}
La valeur cover est la plus utilisée dans la pratique, car elle garantit que le fond remplit toujours l'élément quel que soit son format.
background-position : positionner l'image de fond
Quand une image est rognée ou ne couvre pas entièrement l'élément, background-position permet de choisir quelle partie de l'image est visible.
On peut utiliser des mots-clés :
-
Horizontalement :
left,center,right -
Verticalement :
top,center,bottom
.hero {
background-image: url("../images/paysage.jpg");
background-size: cover;
background-position: center top;
}
Il est aussi possible d'utiliser des valeurs en pixels ou en pourcentages pour un positionnement plus précis :
.hero {
background-image: url("../images/paysage.jpg");
background-size: cover;
background-position: 50% 30%;
}
La valeur center center est souvent utilisée avec background-size: cover pour centrer l'image dans l'élément.
background-repeat : créer un pattern ou désactiver la répétition
Comme mentionné plus haut, une image de fond se répète automatiquement si elle est plus petite que l'élément. La propriété background-repeat permet de contrôler ce comportement.
Les valeurs disponibles sont :
-
repeat: l'image se répète horizontalement et verticalement. C'est la valeur par défaut. -
repeat-x: l'image se répète uniquement sur l'axe horizontal. -
repeat-y: l'image se répète uniquement sur l'axe vertical. -
no-repeat: l'image ne se répète pas du tout. Elle s'affiche une seule fois.
/* Désactiver la répétition */
.hero {
background-image: url("../images/paysage.jpg");
background-repeat: no-repeat;
}
/* Créer un pattern avec une petite image */
.pattern {
background-image: url("../images/motif.png");
background-repeat: repeat;
}
La répétition est très pratique pour créer des fonds texturés ou à motifs à partir d'une petite image. Dans les autres cas, on utilise généralement no-repeat.
La propriété raccourcie background
Plutôt que d'écrire chaque propriété séparément, il est possible de tout regrouper sur une seule ligne avec la propriété background.
L'ordre des valeurs est le suivant :
/* background: image position/taille répétition attachment */
.hero {
background: url("../images/paysage.jpg") center center / cover no-repeat fixed;
}
Attention ! La taille (background-size) doit être placée juste après la position, séparée par un /. C'est une syntaxe un peu particulière à bien mémoriser.
On peut aussi n'indiquer que les valeurs dont on a besoin et laisser tomber les autres :
.hero {
background: url("../images/paysage.jpg") center / cover no-repeat;
}
Cette écriture raccourcie est très utilisée dans les projets réels car elle garde le CSS plus compact et lisible.
Définir plusieurs images de fond
Il est tout à fait possible d'appliquer plusieurs images de fond sur un même élément. On les sépare par des virgules. La première image déclarée se retrouve au-dessus des suivantes.
.element {
background-image:
url("../images/logo.png"),
url("../images/fond.jpg");
background-position:
top right,
center center;
background-repeat:
no-repeat,
no-repeat;
background-size:
100px,
cover;
}
Dans cet exemple, le logo est positionné en haut à droite, par-dessus une grande image de fond centrée.
La propriété raccourcie fonctionne également avec plusieurs fonds :
.element {
background:
url("../images/logo.png") top right / 100px no-repeat,
url("../images/fond.jpg") center / cover no-repeat;
}
Cette technique est utile pour superposer une texture légère, un logo ou un élément graphique sur un fond principal, sans avoir à utiliser d'élément HTML supplémentaire.