Comment rendre responsive une image de fond ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-02-20 13:08:19
Thèmes : image - css - html5
Question

Bonjour, je dois mettre une image de fond dans une balise <div> ; comment faire pour que l'image soit responsive et adapte ses dimensions à son conteneur ?

Réponse

Pour rendre responsive une image de fond HTML, vous devez créer une CLASS CSS pour que l'image de fond s'adapte aux dimensions de son conteneur.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment rendre responsive une image de fond ?</title>
<style>
.image_fond_responsive { 
background-image: url("https://www.collaborativejob.com/os.jpg");
width: 100%;
height:500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>  
<body>
<div class="image_fond_responsive"></div>
</body>
</html>

Remarque : La propriété CSS background-size définit la manière dont l'image de fond est redimensionnée et responsive, elle peut prendre plusieurs valeurs : cover, contain, des pourcentages, etc. Vous trouverez le détail de ces valeurs via cette page du site de Mozilla.