I have been trying for hours on how to do a background image and a repeated image for my ‘container div’ like this example: Background image
[img]http://i144.photobucket.com/albums/r192/Big-Major_2007/bg-repeat-image.jpg[/img] Repeated image
The main div contains the repeated image div and has a padding-top of equal to the main background image’s height.
The height’s were just put in there to give some sense of layout, they should not be added unless needed for the layout (the content should dictate the height though.)
this is assuming that you would have content in the top box, and content in the bottom repeated area, with no overlap.
I’m a newb as well so I don’t know if this is the BEST solution or if it is cross browser, but it worked in Firefox on Windows, here at work.
I tried to get this working, but when I tried to add my; navigation, text, or graphics, they were pushed down beneath the [#main bg]. It works only if I add a -300px padding-top, but then I will have to do that for all my content.
I did another screen example of how I want it done:
Pretty much, the ‘Content’ and ‘Sidebar’ box displays on top of the [#main bg] and [#bg-repeat].
It may be a little difficult to see, but the Red outlined divs, are your content, sidebar, and navigation areas. the black outlined was just part of the image you supplied, and I have no resource to remove it here at work…
The body gets the repeated image, and a container div, gets the main top image with no-repeat. (make sure the container is not positioned down at all, or you would reveal the repeated image above it.
Cool! Thanks blue642, I got it working. I actually put my background image in the wrong box container, which was covered by the repeated background image, instead of bringing the image to the front, similar to using it like layers. Why didn’t I think of this before :roll: .
P.S The CSS you provided works, and it opened my eyes to find the error I made.