The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS layout background problem Re: layout background problem


Separation is your friend in this case.

Separate the "content" image from the background image. Cut the section of the background image that will repeat itself and use that as a background image for the body. Then apply it to the top and set repeat-x, like so:

body { background: url(images/section_of_background_that_repeats_itself.jpg) top left repeat-x #color; overflow: hidden; }

overflow: hidden; is only needed in case the image might be larger then the browser width, because it might create a nasty looking scroll bar.
#color is optional, if you want a default color of background, where the image does not cover.

After doing so, apply the content image where you’d normally apply it. use absolute positioning if needed.