Div background-image isn't showing

Question

I wanted to put a background image inside the div "pageIntro". I've tried setting the background color to transparent, checked the image file path numerous times (it is certainly correct as when I click it in my code using vsCode it pops the correct image).

Note: putting a background color works fine

screensnip of the div with NO background color. Background-image is set to '/img/home/flower-cup.jpg'.

screensnip of the div with GOLD background color. Background-image is still set to '/img/home/flower-cup.jpg'.

Here's the CSS of the div and all the elements inside it:

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;
}

Here's the 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>

Thank you very much:)

UPDATE: Here's what it looks like when putting the background-image on BOTH inner and outer div. Unfortunately, it only works on the inner.

Answer 1

Issue is with your Image Relative Path i just tried you code with an online image path its working fine.

 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

Hi As I can see your relative path.

if the image forlder is in same path of your html

What i can see error in your HTML . Which is span is not properly closed with a and img tag.

<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>

you can use .

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;
}

Or if its one above your path you can use ..

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;
}

I have created one JS fiddle