I am currently working on a small web project and I want to change the background image in the header section while also making it responsive. I attempted to use a class called "header_accueil" in my header to distinguish different sections of the site, but unfortunately, it did not work as expected. Despite searching through various forums, I have been unable to find a solution to my issue.
Below are snippets of my CSS and HTML code:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.header_accueil {
background: url('images/4585760.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display:block;
}
}<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header class="header_accueil">
</header>
</body>
</html>Additionally, here is the directory where all my files are stored:
Any assistance you can provide would be greatly appreciated. Thank you.