Background size issue?

Question

I have a giant background image that I need 100% 100% scale. But my problem is if the webpage is say 150% height that of the browser (so browser is say 1000x1000, and my website is 1000x1500) when you scroll down to see the rest of the website the background repeats and doesn't get scaled down.

My css is

html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }

Any idea of how I can fix that?

Answer 1

Like the CSS-Tricks article explained, you could change the CSS to:

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

This will make sure your background image covers the whole page, but is only supported in CSS3. Like above, you need to include specific code for each major browser.

Alternatively, try just using:

height: 100%;

or

width: 100%

depending on the image size in relation to your page, but this should let the image resize to the right height/width of your page, while nicely maintaining aspect ratio.

Answer 2

Here is a great resource on that topic.

http://css-tricks.com/perfect-full-page-background-image/

Hope it helps.

Answer 3

Just set 100% on the width if its smaller then the height otherweise set the height 100%. You could probably fix that with javascript.

Answer 4

Try applying the background image to the html instead.