Marnix Bent Marnix Bent - 3 months ago 9
CSS Question

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

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

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%;
}
Comments