CSS Background image repeat issue

I'm trying to have a background image repeat x and y to the bottom of the page.

The background image pattern div is

#pattern {    
    height: 3000px;
    width: 1000px;
    background:url(../images/patterns/pattern1.jpg) repeat;
    }

In the html, it resides inside

#wrapper {    
    position: relative;    
    width: 1000px;    
    margin: 0 auto;    
    text-align: left;    
    }

The height on #pattern is set to 3000px just so it will show up, otherwise the image 开发者_如何学JAVAwill not appear.

I have tried various things such as:

height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;

I would like the background image to repeat to the bottom of #wrapper, to the bottom of the page.

Webpage is here:

Thanks so much.

You've set a fixed height on the wrapper, so it'll stop at 3000px, regardless of how much content is in there. Try a min-height instead. That'll keep it at a minimum size so it's visible,but allows it to grow to fit the content in it.

Try giving the #pattern a position:fixed; so it doesn't matter how much content you have to scroll, it won't scroll itself.

Side note: repeat is the default property for background image so no need to declare.

Your HTML is wrong. The #pattern div should contain the rest of the page. You want it to grow with the contents.

Your interior divs are all absolutely positioned, making it impossible for them to influence the height of the container #wrapper, which is where you'd want to put your background image code.

Also, I'm not sure if this is intentional, but #pattern doesn't wrap any of your content, so it's height has to be manually set, since it has no children.

There are two approaches you can take. Use Javascript to determine the combined height of your absolutely positioned divs and set the height of the pattern to that number.

Or, you can use float to arrange your columns, and put a

The div tag containing the #pattern style should start on the first line after the body tag and close at the end of the page just before the close of the body tag.

BTW, remove the height and width attributes or set it to 100% so that it repeats throughout the page.