CODEWITHSUNDEEP
htmlcss
jhamm
jhamm

Reputation: 25022

Why is my image not showing in my div?

I have an image that I am showing on a page. Here is my css:

body {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
}

When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:

<body>
    <div class="background-image"></div>
</body>

And here is my new css:

.background-image {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
}

But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?

Upvotes: 1

Views: 6371

Answers (3)

Omkar Kulkarni
Omkar Kulkarni

Reputation: 824

I would suggest remove background-size: 100%; .. instead add height and width as 100%.

 body {
        background: url(./../imgs/beach.png) no-repeat;
        height: 100%;
        width: 100%;
    }

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10776

It's because the div is 0 pixels tall, give it some height, for example:

.background-image {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
    height: 100vh;
}

Upvotes: 5

Jon Harding
Jon Harding

Reputation: 4946

Since you are only using background you need to set a height/width on the div itself.

.background-image {
    background: url(./../imgs/beach.png) no-repeat;
    background-size: 100%;
    height: */Your Value/*;
}

Upvotes: 1

Related Questions