Trying to stretch a background downwards, but a white space remains

Question

I am busy placing my HTML site into a wordpress template. It is working out so far but i'm stuck at the background. At large pages the background stops and shows a big white space.

The background consists stripes, but also has a gradient fade from dark (up) to light (down).

I am trying to stretch the background down to the bottom of the screen. That works with pages smaller than my screen, but larger pages where I need to scroll down, the background stops and shows a big white space.

I am in need of some help here - I've tried a lot of solutions where some solved my problems with the large pages, but then the problem exists at the smaller pages. I hope there is a solution to stretch this background all the way down, on every page.

Current code (works on small pages, but problems on large pages)

html
{
    background: url(images/lines-bg.png);
    background-repeat: repeat-x;
}

But when I add this to the html css, the problem occurs then at the small pages..

    background-size: auto 100%;

I also want the background to be scrollable, not fixed.

Many, many thanks!

Answer 1

I found out how to solve this problem, I moved the css code from html to body and added some extra things to make sure:

html
{
    min-height:100%;    
}

body
{
    min-height:100%;
    background: url(images/lines-bg.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

Answer 2

there are 2 things you can try if you don't have to support super old browsers:

you can use the background-attachment: fixed; property that fixes the initial way the background is loaded to the page even when scrolling.

Or you can use background-size:cover; property which stretches the background to cover the size of the content area dynamically. THis isn't always the best solution though as image quality can become an issue and inconsistent background arise from different page lengths.

Answer 3

How big is the background? When you say background-size: auto 100% it is setting the background image to be 100% of the size it is. Ex: if a image was 100px and you said background-size: auto 100% it would tell the image to be 100px and if you did background-size: auto 50% it would tell the image to be 50px. I believe that is your problem.