My background image isn't loading without a pixel value for height

Question

I'm trying to load an image as a background image as a responsive background image. but the image isn't loading. here is my CSS code.

.cover{
    height: auto;
    width: 100%;
    background-image: url(../img/cover.jpg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

Possible duplicate of [Why doesn't the background image show up without specific width and height?](https://stackoverflow.com/questions/32175195/why-doesnt-the-background-image-show-up-without-specific-width-and-height) — Lalji Tadhani, Apr 27 '19 at 03:48
Give it min-width, it will be fine. .cover { min-width: 10vw;} — Robin, Apr 27 '19 at 04:19
@LaljiTadhani i tred it already but couldn't find a clear solution. thank you. — Hasitha, Apr 27 '19 at 04:51

score 1 · Accepted Answer · answered Apr 27 '19 at 04:43

1

If the div doesn't has content then its height will be 0px,So the background image is not displayed. Try giving height as 350px say or 100vh . you can check the div height by giving border.Ref this Why doesn't the background image show up without specific width and height? for more details,hope it helps

answered Apr 27 '19 at 04:43

Deepak A

1,624
1
7
16

The issue was div tag not having a value. I applied height as height: 100vh; and it worked fine. Thank you. – Hasitha Apr 27 '19 at 05:00

My background image isn't loading without a pixel value for height

1 Answers1