Bg image inside div height issue

HTML & CSS
1

I have a div that has a background image set to it, but what I cant get my head around is that I have to set the height of that div for the background image to appear, but when I view the site on a mobile it keep the height of the div and then the background image tiles.

This is what i got -

<div class="header_Image">
</div>

.header_Image{
background-image:url(../img/house2.jpg);
background-size:100% auto;
min-height:550px;
}

And to show you the site this is the link - enter link description here

What I would like to happen basically is that the div responds to the size of the screen and the image follows

2

Did you want something like this?

.header_Image {
background:url(../img/house2.jpg) no-repeat cover;
/* min-height: 550px; */
}
3

Hi, the image now doesnt show with that, and if I take the comments away it still doesnt show.

4

It shows for me? Can you screenshot what you are seeing? What browser?

5

Umm oh I cant see anything in Mozilla and IE11, the h1 title and logo shows but no background image.

Thats strange.

1440×900 97.1 KB

6

Ah ok. Remove “cover” from that rule and put it as a background-size.

7

Ah thank you, thats great. I got a bit of work to do to get it looking right, but thats a great start.

So just one more question, seeing the height of the div is 550px and the height of the image is actually 554px, is it that the height of the image is increasing because its having to compensate for the width.

Is there a way around that, so the images height is always the same as the height of the div, and I suppose the wdth having to be covered too, or is this something I’m going to have to work around a little.

Thanks

8

I mean you can put the min-height:550px back in but…

I mean right now the image technically is the height of the div. The only content in hte header_Image element is that logo.

9

I see yes, thank you.

Cheers

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.