Background image doesn't fit browser when resized - image

Question

I can't seem to get my background to stay fitted to my browser when I resize the window. Please help!
Here are the images to show you what is going on: View images
The first image is how it should be fitted, the second is when I stretch it horizontally and the third is when I stretch is vertically (sorry, not sure why it uploaded my images twice)
Here is my code I am using:
body {
background: url('images/bkg-img.png');
repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

The problem is that background-size: cover covers the background positioning area (see W3C page), which is, in some cases, the calculated height of the body. Not always as high as the window!
The simplest solution I've found is also put a
html {height:100%}
in the stylesheet. But you might have to experiment a bit with your setup to get it to work the way you want. I'm pretty sure it varies across browsers and depends on whether you're using standards or quirks mode.

Answer 2

There are lot's ways to do this, if you set the image as background-image of body it is not going to shrink or expand it is going to be stay same this is the expected behaviour.
You can use sth. like this for this:
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
And style of them:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
To be able to put your content above of the background image put your content inside another div like:
<div class="pagewrap">
<p>Content</p>
</div>
And class of it:
.pagewrap {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
View demo or other techniques, about z-index.

Answer 3

Fixed image
If you don't need the bg image to scroll with the page, you can still apply the bg image to the body tag if you set background-attachment: fixed;
body {
background: url('images/bkg-img.png') no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
jQuery
If the bg image does need to scroll with the page, it might be worthwhile to apply some JavaScript or jQuery code, in the interest of keeping the HTML and CSS relatively simple.
function stretchBg(width, height, contain) {
var pageWidth = $(document).width();
var pageHeight = $(document).height();
if ((pageWidth / pageHeight) > (width / height) == !!contain)
$('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
else
$('body').css({backgroundSize: pageWidth + 'px auto'});
}
$(document).ready(function(){ stretchBg(640, 480); }); // Page load
$(window).resize(function(){ stretchBg(640, 480); }); // Browser resize
JSFiddle Demo (and standalone version of the demo)
To preserve the aspect ratio, the native width and height of the image are passed to the above function, along with an optional third parameter for whether the bg image should cover or contain the page (the default is cover).
Alternately, here's a more-advanced demo (and standalone version) that automatically detects the native resolution of the bg image currently applied to the body tag. Below is an example of using it:
$(document).ready(function(){
FullBodyBackground.init({contain: false});
});