Comment ajouter un background image avec Bootstrap ?

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.

[epcl_box type= »information »]A lire aussi : Comment intégrer un background vidéo fullscreen en HTML5 ?[/epcl_box]

 

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

[epcl_box type= »notice »]N’hésitez pas à consulter la documentation Mozilla de background-size[/epcl_box]

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

[epcl_box type= »notice »]Plus d’informations dans la documentation ![/epcl_box]

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.

[adinserter block= »8″]

 

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.

[epcl_box type= »notice »]Plus d’informations dans la documentation.[/epcl_box]

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é !

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 !

Article précédent

Comment faire une page HTML avec le bloc note ?

Article suivant

Comment faire un effet de parallaxe en CSS ?

Écrire un commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *