изображение героя не появляется - PullRequest
0 голосов
/ 22 апреля 2019

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

Я пытаюсь, чтобы "баннер" проходил по всему экрану простокак на панели навигации.

...