CSS3 background randomly cutting my images - html

Question

I have two html pages (index.html and about.html) with the same background in the body tag. I am using the following CSS to create the background:
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
However, the browsers (Firefox and Chrome) are not positioning the image correctly. Since the background color is white, index.html has a white line under the background image. I am assuming that the image height is too short.
Yet, there is a block of white space under the background image of about.html, bleaching over a quarter of the page.
How does this happen when I'm using the same CSS.
While on this topic, what is the best way to manage a background image for different screen resolutions?

Answer 1

Try:
background-size:contain;
contain property scales the image to the largest size such that both its width and its height can fit inside the content area.

Answer 2

The best solution that I can come up with was to use background-attachment: fixed;. This filled the entire background with my image.
I have not figured out as to why my CSS was displaying my background in different ways. This is something to look at.
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

Answer 3

I prefer you first take a small slice of image by photoshop and save it for web and devices or take a small size by snipping tool.Than you will get a small image with small size.
than type bellow code
body {
background-image: url('http://www.skrenta.com/images/stackoverflow.jpg');
background-repeat: repeat;
}