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-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.

When you say stretched, do you mean the shape of the image is distorted, or that the top and bottom of the image are cut off? And which browsers have you tried this on? — Gareth Cornish, Dec 27 '12 at 18:37
@GarethCornish Yes top and bottom of image is cut off. I have tried it on IE9 and Chrome. — Himanshu Yadav, Dec 27 '12 at 18:52

score 36 · Accepted Answer · answered Dec 27 '12 at 19:06

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%

you can partially avoid distortion of the image aspect ratio by constraining either image minimum dimension (e.g. `min-height: 700px;`). — ecoe, Oct 19 '14 at 23:43
most of times I use the first option `background-size: cover` with media queries that serve different aspect ratios of that image. — fat_mike, Oct 10 '17 at 21:10

score 7 · Answer 2 · answered Dec 27 '12 at 18:39

7

try with contain instead of cover and then center it:

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

answered Dec 27 '12 at 18:39

vGichar

81
4

1

It is giving me same result even if I remove these two properties. Didn't work for me. I want to cover the complete background. – Himanshu Yadav Dec 27 '12 at 18:51
are you sure the picture itself isn't stretched, aside the html? – vGichar Dec 27 '12 at 18:53
check background-url properties. – Himanshu Yadav Dec 27 '12 at 18:55
try with setting the selector to "body" and not "html" – vGichar Dec 27 '12 at 18:57
btw "cover" as property doesn't stretch images... So it should work like that too – vGichar Dec 27 '12 at 19:00
No chage. I am getting some result with 'background-size: 100% 100%' but now image is distorted. – Himanshu Yadav Dec 27 '12 at 19:02

score 3 · Answer 3 · answered Mar 04 '14 at 08:51

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;

answered Mar 04 '14 at 08:51

Behnam

6,244
1
39
36

score 2 · Answer 4 · answered Dec 27 '12 at 19:14

2

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.

answered Dec 27 '12 at 19:14

rentageekmom

301
1
8

score 1 · Answer 5 · answered Jun 21 '17 at 01:53

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;

score 0 · Answer 6 · answered Dec 27 '12 at 19:19

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.

CSS: Full Size background image

6 Answers6

Linked