Reply To: Background image height problem – not fitting to the screen

[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. :-(