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.1formatik.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.