Bootstrap ne prévoit pas de solution pour ajouter facilement un background image.
Nous allons voir dans cet article comment le faire simplement, en accord avec la philosophie de Bootstrap.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Créer une classe générique
Déjà, il faut prévoir une classe réutilisable, qui contiendra les éléments indispensables pour un background image. En voici le CSS :
.bg-image{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Background-size
La propriété background-size précise la taille que prendra notre image dans le background.
La valeur cover lui précise de prendre tout l’espace disponible.
Il est possible de mettre des valeurs en % ou en px, pour sélectionner une taille plus précise (attention qu’en px, la taille ne s’adaptera pas en fonction de l’écran, contrairement aux %).
En fait, cover est un raccourci pour 100%.
Background-position
background-position indique la position de notre image, centrée dans notre exemple grâce à la valeur center.
D’autres valeurs sont possibles, comme top (placer l’image en haut), bottom (en bas), left (à gauche) et right (à droite).
Background-repeat
Enfin, background-repeat: no-repeat est important pour éviter certains soucis (l’image qui se répète) sur certains device / formats d’écran.
Ainsi, nous avons notre classe générique et réutilisable ! background-size: cover et background-position: center permettent d’avoir une taille et une position passe-partout, qui sera adaptée dans la plupart des cas d’utilisation !
Cependant, il faudra lui rajouter une propriété pour que ça fonctionne comme on le souhaite.
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Placement de l’image
Une fois qu’on a notre classe bg-image, il reste à lui préciser le chemin vers notre image ! Nous allons utiliser l’attribut HTML style, qui nous permet de rajouter du CSS dans des balises HTML, comme ceci :
<div class="bg-image" style="background-image: url('https://www.codeur.com/tuto/wp-content/uploads/2022/01/pexels-roberto-nickson-2559941-1.jpg')"></div>
La propriété background-image demande un chemin vers notre image, qu’on précise dans url('').
Dans l’exemple, on utilise une chemin absolu https://www.codeur.com/tuto/wp-content/uploads/2022/01/pexels-roberto-nickson-2559941-1.jpg (un lien vers une image du net), mais il est possible de préciser une chemin relatif à votre projet.
Et voilà, vous pouvez commencer à placer vos images avec cette propriété et la classe générique !
Attention que l’élément sur lequel vous placez votre background doit avoir une hauteur (via la propriété height ou du contenu à l’intérieur), sinon vous ne verrez pas votre background. En effet, celui-ci s’adapte à la taille de sa div, et pas à l’image que vous avez précisé !
See the Pen
BG Image
on CodePen.
Dans notre exemple, nous rajoutons une height: 100vh (100% de la hauteur d’écran) dans l’attribut style
Cas précis
Parfois, notre classe bg-image ne sera pas adaptée à une image particulière, ou autre cas bien précis.
Pensez à Bootstrap, n’hésitez pas à créer vos propres classes de CSS atomique pour faire varier les propriétés de bg-image ! Par exemple :
.bg-size-half{
background-size: 50%;
}
.bg-position-top{
background-position: top;
}
Elles s’utiliseraient comme ceci, avec bg-image à côté :
<div class="bg-image bg-size-half bg-position-top" style="background-image: url('https://www.codeur.com/tuto/wp-content/uploads/2022/01/pexels-roberto-nickson-2559941-1.jpg')"></div>
Évidemment, ça correspond à des cas très précis ! Mais ainsi, notre classe bg-image peut vraiment s’adapter dans toutes les situations, à la manière de Bootstrap !
N’oubliez pas que vous pouvez trouver un développeur web freelance rapidement pour vous aider, sur Codeur.com !
