.main_banner {
background-image: url("../images/main_banner.png");
width: 100%;
height: auto;
}<!DOCTYPE html>
<html>
<heading>
<title>
**********
</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
</heading>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<body>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>My HTML has a div element with the class of main_banner. Yet, despite specifying the image in my stylesheet, it's not displaying as intended.
The structure of my main project folder includes: index.html, images (folder), and styles (folder). I've placed my image, main_banner.png, inside the images directory.
What could be causing this issue?
.main_banner {
background-image: url('../images/main_banner.png');
}