Background images that fill window?

Question

I have a background image and I want to fill the entire background of my site. I use:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

The image is 2000px x 2000px. The problem is, when the browser window is larger than 2000px you can see a white background. Is there a way to get the image to strech if the browser window is large than the image?

Possible duplicate: http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only?rq=1 — levelnis, Apr 21 '13 at 19:10

score 1 · Answer 1 · answered Apr 21 '13 at 19:14

1

First of all avoid using such large images as background if you are just using it for background . You can do it like this dont put everything to cover .Just in style tag put these two and you will get it .

background-image:url('your image');
background-size: cover;

Quality of image may be disturbed if it expands too much but this works .

answered Apr 21 '13 at 19:14

Sikander

2,799
12
48
100

This doesn't work. I've made my image smaller but it doesnt fill the screen now. – panthro Apr 21 '13 at 19:33

score 0 · Answer 2 · answered Apr 21 '13 at 19:44

0

Try this:

background-size: 100% auto;

answered Apr 21 '13 at 19:44

Gilly

9,212
5
33
36

score 0 · Answer 3 · answered Apr 22 '13 at 00:22

background-size: cover; seems to work for me both ways -- both shrinking an image to fill if it's larger than the element, or stretching the image to fill if it's smaller. Here's an example of a small image stretching to fill a larger div: http://jsfiddle.net/MRSallee/Q7STG/

score 0 · Answer 4 · answered Apr 22 '13 at 00:28

0

I prefer using this:

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

answered Apr 22 '13 at 00:28

Rajender Joshi

4,155
1
23
39

Background images that fill window?

4 Answers4