CSS: Full Size background image - css

Question

Trying to get full size background image with:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
It's showing the background image with correct width but height gets stretched.
I tried various options like
html {
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
}
removing height: 100%
but none of them worked.

Answer 1

Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:
You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use: background-size: cover
You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use: background-size: contain
You can choose to cover the entire screen with your background, and distort it to fit. For this case, use: background-size: 100% 100%

Answer 2

try with contain instead of cover and then center it:
background-size: contain;
background-position: center;

Answer 3

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 4

A better solution might be to use a lightweight jQuery plugin to dynamically size the background to the browser site. One I really like is backstretch.js. They're incredibly simple to implement.

Answer 5

I have same problem I use this CSS on body
background: url(image.jpg);
background-color: rgba(0, 0, 0, 0);
background-position-x: 0%;
background-position-y: 0%;
background-size: auto auto;
background-color: #0a769d;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
max-width: 100%;
min-width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;

Answer 6

You should use the body as the selector and not html, this will cause issues with your markup. Your code is below:
html {
height: 100%;
background:url('../img/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
I would try something like:
body {
background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
margin: 0 auto;
}
You should not have to specify the dimensions for the image.