CSS Problem- 100% BG Image does not go beyond scroll bar..

Hi All,

This might be an all too obvious problem, but not to me. I have done extensive research on this, peeked at code which seems to do what i'm looking for, but the problem still continues.

The problem is I have a background image which is to outline my page with shadow edges. I have that set to repeat y, minheight: 100% and height: 100%, but it only fills the screen which is the problem. When you scroll down the page (what is beyond the screen) the background image does not continue.

I have included a screen-shot of my site to help illustrate the problem I'm having better:
http://www.freewebs.com/jrgirard/cssbgproblem.png

The source code of the page:
http://www.freewebs.com/jrgirard/sourcecode.png

The CSS code of the page:
http://www.freewebs.com/jrgirard/csssourcecode.png

I've thought of setting the bg image to something like 1000px but then that would cause the page to go way beyond what is necessary in length.

Thanks for any help in advance,
PS. Does anyone actually think the site looks good the way it is, and I should just forget about this problem?
Jon.

It's because of the 100% height. 100% height causes the element to span only 100% of the browser body. If the browser goes beyond 100%, the element wont span with it. You should be able to just take out min-height:100%; and height:100%; and it'll span automatically. If you do this, and the background image disappears all together (which may be why you went to 100% height to begin with), then you need to have your main-block-external clear the floating columns inside it. To learn how to do that, read this:

http://www.positioniseverything.net/easyclearing.html

Thanks,

I'll play around with the clearing some more. So far I've set it to clear with still no luck..

It's because of the 100% height. 100% height causes the element to span only 100% of the browser body. If the browser goes beyond 100%, the element wont span with it. You should be able to just take out min-height:100%; and height:100%; and it'll span automatically. If you do this, and the background image disappears all together (which may be why you went to 100% height to begin with), then you need to have your main-block-external clear the floating columns inside it. To learn how to do that, read this:

http://www.positioniseverything.net/easyclearing.html

In his example, there is a lot of content which spans past the actual size of the browser body and creates the scrollbars. But if he takes out the "height:100%" and the content in his page ISN'T enough to make the DIV extend down enough to cover the entire page, you will have the same problem with it cutting off early. Say he takes out most of the text, and it only goes down 75% of the browser body. That means his backgrounds will only go down 75% of the way, because he took out the height:100%. Am I right?

I'm having the same problem WebDevJon, and somebody suggested this link:

http://nopeople.com/CSS/full-height-layout/

I'm going to try this and see if it works.

Hi There,

It turns out i fixed the entire problem gofizbo, got the answer from another forum :D

All that I had to do was remove all the height 100%'s and what actually was causing the problem were any float:lefts I had in the code. Upon removing the height settings and float settings everything worked fine.

Thanks, and good luck.

Jon.