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é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;
}
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 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).
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.
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
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 !