Я работаю над веб-сайтом, и я пытаюсь заставить изображение отображаться по всей верхней части страницы, в основном, как баннер, я пытаюсь сделать это, используя изображение героя, однако было бы открыто для других предложений, которыеможет работать лучше для меня.У меня проблема в том, что независимо от того, что я делаю, изображение не отображается, если я добавляю текст, текст просто показывает, где изображение будет, но изображение не существует.посмотрел на консоль и путь правильный и ошибок там не видно.Я также использую w3.css для моей основной таблицы стилей
, вот мой html-файл:
<!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>
Я пытаюсь, чтобы "баннер" проходил по всему экрану простокак на панели навигации.