Full size background without resizing - html

Question

I'm facing this trouble for quite some time now, have tried n number of options but still no luck.
I have this background image :
Which I want to make as the background of my website. I added it as a full sized background, but I don't know why it always gets resized and becomes something like this.
Here's my css code for the background image.
body
{
background: url('../images/home.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm really unsure how to fix this! Please guide me in the correct way.

Answer 1

The background-size: cover property in CSS3 stretches your images to fit the background of the element you have specified, which in this case your body.
Edit: As others have mentioned, using background-size: contain would give you the most desirable result as it is defined by the following:
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
The link below also has other properties that may give you your desired results:
Source:https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

Try to use background-size:contain instead of background-size:cover. Maybe that is more appropriate.

Answer 3

If you want to keep your image in proportion you would want to use
background-size: contain;
However the issue with this is it will keep the background in proportion, so if your window is not the same proportions you will have white space around. Building off #Sebastien 's fiddle I can show you what I mean -
http://jsfiddle.net/j0n19rw5/5/
You could try re-sizing the image itself to work better with contain.
But if you want it to cover the background you would probably be best using cover. One trick is to crop the image to the space (if you know a general sizing).
You can get away without stretching it too much with a method like this one :
https://jsfiddle.net/r3qpe4dm/1/
But it will still cut off your image at smaller sizes.

Answer 4

To be sure, split the background property for each sub-attribute :
body
{
background-image: url('http://i.stack.imgur.com/ZQinh.jpg');
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
http://jsfiddle.net/Paf_Sebastien/j0n19rw5/1/
Edit:
Add this to your CSS since your HTML/body seem to have a low height:
html, body {height: 100%;}