Catégories : Bootstrap

Comment ajouter un background image avec Bootstrap ?

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.

 

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%.

N’hésitez pas à consulter la documentation Mozilla de background-size

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).

Plus d’informations dans la documentation !

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.

 

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.

Plus d’informations dans la documentation.

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 !

Partager
Tags : Tuto