Div фоновое изображение не отображается

Question

Я хотел поместить фоновое изображение внутри div "pageIntro". Я попытался установить прозрачный цвет фона, много раз проверял путь к файлу изображения (это, безусловно, правильно, так как, когда я щелкаю его в своем коде с помощью vsCode, оно выдает правильное изображение).

Примечание: установка Цвет фона отлично работает

screennip div без цвета фона. Фоновое изображение имеет значение '/img/home/flower-cup.jpg'.

screennip div с цветом фона GOLD. Фоновое изображение по-прежнему установлено в '/img/home/flower-cup.jpg'.

Вот CSS элемента div и всех элементов внутри него:

div.pageIntro {
    position: relative;
    background-image: url('/img/home/flower-cup.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

.introDiv {
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    z-index: 002;

}

.introText {
    font-weight: bold;
    font-family: "eczar";
    color: whitesmoke;
    font-size: 50px;
    z-index: 002;
}

.subIntroButton {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:rgba(0, 0, 0, 0.1);
    width: 150px;
    border-style: solid;
    border-radius: 5%;
    border-color: whitesmoke;
    border-width: 2px;

    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: whitesmoke;
    padding: 10px 10px;
}

Вот HTML:

<div class='pageIntro'>
    <div class="introDiv">
            <p class='introText'> You deserve it. </p>
            <a href="menu.html" style="text-decoration : none">
                <div class='subIntroButton'> check treats </div>
            </a>
    </div>
    <span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>

Большое спасибо:)

ОБНОВЛЕНИЕ: Вот как это выглядит, когда помещая фоновое изображение на ОБА внутренний и внешний div. К сожалению, это работает только на внутреннем.

Answer 1

Проблема с вашим Относительный путь к изображению Я только что попробовал вам код с сетевым путем к изображению, он работает нормально.

div.pageIntro {
    position: relative;
    background-image: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

.introDiv {
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    z-index: 002;

}

.introText {
    font-weight: bold;
    font-family: "eczar";
    color: whitesmoke;
    font-size: 50px;
    z-index: 002;
}

.subIntroButton {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:rgba(0, 0, 0, 0.1);
    width: 150px;
    border-style: solid;
    border-radius: 5%;
    border-color: whitesmoke;
    border-width: 2px;

    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: whitesmoke;
    padding: 10px 10px;
}

<div class='pageIntro'>
    <div class="introDiv">
            <p class='introText'> You deserve it. </p>
            <a href="menu.html" style="text-decoration : none">
                <div class='subIntroButton'> check treats </div>
            </a>
    </div>
    <span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>

Answer 2

Привет Как я могу видеть ваш относительный путь.

, если forlder image находится на том же пути, что и ваш html

Что я могу видеть ошибку в вашем HTML. То, что span не закрыто должным образом с тегами a и img.

<div class='pageIntro'>
    <div class="introDiv">
            <p class='introText'> You deserve it. </p>
            <a href="menu.html" style="text-decoration : none">
                <div class='subIntroButton'> check treats </div>
            </a>
    </div>
    <span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"/></a></span>
</div>

, вы можете использовать .

div.pageIntro {
    position: relative;
    background-image: url('./img/home/flower-cup.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

Или, если one above ваш путь, который вы можете использовать ..

div.pageIntro {
    position: relative;
    background-image: url('../img/home/flower-cup.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

Я создал одну JS скрипку