Unable to See background

#1

Html

<div class="site-content">

            <div class="image-content">

                <h1 class="quote">Coffee is much better than Chai*</h1>

            </div>

            <div class="card-list">

                <h1 id="product">Product</h1>

                <div class="card">

                    <img src="img\coffeecards\mocha-image.png">

                    <div>

                        <h2>Mocha</h2>

                        <h3>₹250</h3>

                    </div>

                </div>

Css

.site-content{

    position: absolute;

    top:78px;

    width: 100%;

}

.image-content{

    background-image:url("img\background-image.jpg");

    height:700px ;

    width: 100%;

    text-align: center;

}

.quote{

    color: white;

    font-family: Helvetica, sans-serif;

    position: relative;

    top: 10%;

}

Capture
Capture1920×891 18 KB

#2

Hi @manasjha0007,

Can you share your project structure ? For example: See my project structure

Screenshot 2021-06-15 at 5.59.11 PM

Also, try the below lines and check if it works.

background-image:URL("..\img\background-image.jpg");
#3

Capture

#4

Hi @manasjha0007,

According to your project structure, the below line should work -

background-image:url("img/background-image.jpg");

Also, can you upload your whole project to google drive and share the public link of the folder with me so that I can try it out?

Do let me know in case you need any other information.

#5

I’m also facing the same issue. I tried this line of code but no change.

#6

Hi @ShreyPatnaik,

Please host your project here https://www.hostatic.com/ and share your website link so that we can help you out with your query.

Do let me know in case you need any other information.

#8

Sir the issue got resolved. I made some syntax error in CSS for image content class. Also the file extension for the image needed to be changed as it got saved as .webp by default instead of .jpg . After making those changes my issue got resolved. Thank You Sir.