Background image height problem – not fitting to the screen

[JoTidman]

I’ve been writing my website on my laptop and in testing it displays fine, but when I look at it on my work computer with a different size screen the background image leaves a blank section across the bottom. The background image is filling the screen from left to right, but up and down it doesn’t and therefore when I adjust the size of the window the background image is stretched and looks silly.
This is my site http://www.rockclick.co.uk/wiss/index.htm and my code is this:

BODY

{
background-image: url(“photos/background image 1.jpg”);
background-size: 100% 100%;
background-repeat: no-repeat;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: 100%;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image /
img.bg {
left: 50%;
margin-left: -512px; / 50% */
}
}

Can anyone help with my problem?
Thanks in advance.Jo

[JeroenR]

Your body hasn’t the full height of the screen. And the background size you now use (100%, 100%) looks therefore out of scale.
You can add something like this to your stylesheet:

html, body {min-height: 100%;}
body {background-size: cover;}

[JoTidman]

Unless I put it in the wrong place, your suggested code doesn’t work.
I forgot to mention that I’m not very good at websites, I’ve only ever done 2 (not inc this one) and they were very basic!
Would it be possible for you to tell me how I need to edit my code for this to work as I tried a few variations and it’s not working. Sorry I’m so thick!

[JeroenR]

I’ve set up an example: https://codepen.io/jeroenreijs/pen/VyXOPx?editors=1100#0
With the media set on the width of the image, the image will also scale when the viewport is smaller than the image itself, to still see the whole image. You can play with that until you get the result you want.

[DidierAubin87]

I have set up full size but it still doesnt show, can you help me?

[leroyagrayson]

i am also suffered with same problem, can anyone solve this,,?

[JoTidman]

I tried the suggested code in the link above but it messes up the background when I view it on my iphone. So I changed it back to the code below which is all good on my laptop and phone but still have a blank section at the bottom of the page on my work PC screen because it’s a different size. I changed the “max width” to the width of the actual image but still squashes the background image…

BODY

{
background-image: url(“photos/background image 1.jpg”);
background-size: 100% 100%;
background-repeat: no-repeat;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1920px;

/* Set up proportionate scaling */
width: 100%;
height: 100%;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1920px) { /* Specific to this particular image /
img.bg {
left: 50%;
margin-left: -512px; / 50% */
}
}

[JoTidman]

Sorry I mean I changed the “min width” to the image size and max width in the media screen section for iphone display.

[JoTidman]

I looked into this a bit more and tried this coding

<!–

html, body {
background: url("background image 1.jpg") no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This displays fine on my PC screen in testing and does exactly what I want it to do.
I THINK the “webkit” part is how it displays on a phone, so I’m going to try various options as per this link below and see how I get on and update you all…
http://www.css3.info/preview/background-size/

[Beverleyh]

I THINK the “webkit” part is how it displays on a phone

Not quite, but it’s easy to see where your logic is coming from, since the -webkit extension is for targeting WebKit/Blink browsers like Sarafi and Chrome, so if you’re checking the CSS in an iPhone (and probably on the default Safari browser) your changes using -webkit will show there. But it will also be in effect in Chrome on desktop.

If you’re interested in narrowing the CSS down to manipulate it only on small screen devices, look into “media queries”: those are what the @media rules are in some of the snippets you’ve been posting.

[JoTidman]

OK so I tried this code below and it looks fine on my laptop, but now when I look at it on my phone in portrait mode the background image is now zoomed in and only shows the middle part of the union flag (which isn’t even centred!) and no skaters, and in landscape mode it crops the right and left edges of the background image. I’ve tried fiddling about with widths and heights and pixels and percentages and various media queries but still no luck. Does anyone know what on earth I’m doing wrong??
This is my code

<!–

html, body {
background: url("photos/background image 1.jpg") no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

@media screen and (max-width: 1024px)

{ /* Specific to this particular image /
img.bg {
left: 50%;
margin-left: -512px; / 50% */
}
}

If I’m honest, after trying all this, I don’t think that what I want to do is even possible. Basically what I’m trying to achieve is the background image to fill the screen when the phone is in portrait mode but I don’t think that will happen. So therefore, with this code above, how do I make it just fit the page across and leave a blank space at the bottom because I think that’s all it can do.
I hope this makes sense. It’s all a bit beyond me. :-(

[Jemima Abu]

Hey, I went to the site and the background image looks fine in both portrait and landscape.
Did you achieve the effect you were going for or are you still working on it?

[JoTidman]

Thanks for looking at this Jemima. I settled on the last CSS code posted above and am happy with it zoomed in to the centre of the image in portrait mode. It views fine in landscape and fine on all browsers, so I’m happy with it now.

[Author]

Posts