PDA

View Full Version : How can I add two backgrounds


MRGTB
09-18-2006, 05:25 PM
I want to add two backgrounds images to my site. Not page backgrounds, but two images on the body background. I know how to add one image using the body background box. But how can I add two images. So one is used as a tiled background, while the second image will be a header image at the top that sites in front of the tiled background.

Princeton
09-19-2006, 06:04 PM
you will need to add the background image to 2 separate elements

eg.
<div style="background: {color} url({image url})">
<div style="background: {color} url({image url}) top left no-repeat">content goes here</div>
</div>

MRGTB
09-19-2006, 06:09 PM
thanks for that prince, the best way I can describe what I want to do, is I want to the same as this forum here: http://www.forummonkeys.com/forums/forumdisplay.php?f=48

They have a tiled background that is positioned "repeat top center" (which I also want to do because I use a fixed template. I would use that as my first tiled background image.

Then they have the top narrow background with the green leaves that sites in front of the tiled background as a second background image. Again they have that as "no-repeat top center". Can you tell me were I have to add the code to do the same they have done like that using two backgroung images. One as a tiled background, and the other as a narrow top logo that would of course be created to blend in with the second tiled image when it ends.

Becuase I read it has to be done as a body and html image. Becuase IE can't display two body images on the background.

I need you to explain were abouts I would add the code, IE: Does it all go in the extra CSS. Or do I have to put some in a template etc. Or do I add the tiled background in the body box, then add the second image ass extra CSS etc

Princeton
09-19-2006, 06:20 PM
they only use 1 image for header background (http://www.forummonkeys.com/images/header2.gif)

MRGTB
09-21-2006, 01:49 AM
Yes, I know they only use that single image for the top header image with a "no-repeat", but they also use a second image for the main body background as well tiled as "repeat".

http://www.forummonkeys.com/images/bg.jpg

So there accually using two background images. The one you posted above for the top header image, and the second I've posted as a tiled image, that gives the tiled effect snd forum shadow border.