View Full Version : DIV layout background-image problems

07-03-2007, 12:04 PM

My DIV layout is absolutely positioned. I'm having trouble with my layout backgrounds. I have 2 separate backgrounds: one that repeats over the whole page, and one that should repeat vertically to 100% of the content DIV's height. However, the latter stops after whatever screen resolution the viewer has. I know this is a widely-encountered problem, and there are several fixes to it, but I am having trouble applying them to this specific layout (I am not the best with CSS.) Some information is http://www.webmasterworld.com/forum83/200.htm here. I have tried giving the body 100% height like this page advises, as you can see in my stylesheet, but it didn't change anything. I'm really sorry if it's something simple that I'm missing, and for any messy code, but any help would be appreciated.

Here is my layout (please ignore the positioning in IE for a few of the DIV layers, I haven't fixed it yet):


Here is a direct link to my stylesheet:


Thanks a bunch! :D

07-03-2007, 12:49 PM
You have some errors and I believe they are the reason why it's not working. You've used the div #content several times. You can only use an ID one time. Wrap everything that are content in the #content div.

You have this somewhere:

...... background-image: url('stretch.gif'); style="background-repeat: repeat-y; background pos ......

You've defined the style attribute twice, but haven't closed the first one. Again the validator would catch this.


There cannot be spaces in ID and class names. Use - or _.

It would be a really good idea to put a doctype on the page. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

This is just for starters.

07-03-2007, 03:29 PM
Thank you so much! I never knew about all these things I've been doing wrong.. I've fixed all the errors, but I've got to get the page back to looking the way it was before. Then, hopefully, the background will repeat properly. ;) Thanks again!