CSS: Full Size background image

Question

Trying to get full size background image with:

html {
    height: 100%;
    background:url(\'../img/bg.jpg\') no-repeat center center fixed;
    background-s         


        

Answer 1

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 2

try with contain instead of cover and then center it:

background-size: contain;
background-position: center;

Answer 3

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 4

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.

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

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%