I am working on a website and i'm trying to get an image to display across the full top of the page basically like a banner, i am attempting to do this using the hero image however would be open to other suggestions that may work better for me. problem i am having is that no matter what i do the image does not show up, if i add text the text just shows where the image would be but no image exists. looked at the console and the path is correct and no errors show up there. I am also using w3.css for my main stylesheet
here is my html file:
<!DOCTYPE HTML>
<HEAD>
<TITLE>Home</TITLE>
<META name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet" href = "../resources/w3.css">
</HEAD>
<STYLE>
body,html {
width: 100%;
height: 100%;
}
.custom-background {
width: 100%;
background-color: darkgreen;
}
.hero-image {
background-image: url("../images/banner.jpg");
height: 20%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</STYLE>
<BODY>
<a href = "home.html">
<div clas = "hero-image"></div>
</a>
<div class = "w3-bar custom-background">
<div class = "w3-bar-item w3-mobile"><a href = "home.html">Home</a></div>
<div class = "w3-bar-item w3-mobile"><a href = "aboutus.html">About Us</a></div>
<div class = "w3-bar-item w3-mobile"><a href = "salonservices.html">Salon Services</a></div>
<div class = "w3-bar-item w3-mobile"><a href = "jobs.php">Apply Here</a></div>
<div class = "w3-bar-item w3-mobile"><a href = "shopaveda.html">Shop Aveda</a></div>
<div class = "w3-bar-item w3-mobile"><a href = "contact.php">Contact Us</a></div>
<div class = "w3-bar-item w3-mobile"><a href = "policies.html">Policies</a></div>
</div>
</BODY>
</HTML>
I am trying to get the "banner" to go across the entirety of the screen just like the navigation bar does.