Блог

Главная - Вопросы по программированию - изображение героя не отображается

изображение героя не отображается

#html #css #w3-css

#HTML #css #w3-css

Вопрос:

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

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

Комментарии:

1. <div clas Должна быть <div class='hero-image'> опечатка?

2. @scrappedcola иисус… спасибо, я смотрел на это часами и не мог его найти, теперь я чувствую себя глупо

3. Мы все были там…

4. @tgrim90 np это часто случается. Что я пытаюсь сделать, чтобы перепроверить, что я не сделал ничего глупого, подобного этому, — это проверить элемент и перепроверить, что сначала я вижу примененный стиль. Если я его не вижу, я начинаю искать, правильно ли все написано. Это также может привести к сбою, если вы случайно пропустите ; в своем файле css.