This is tricky for me to explain but I will try...
I thought I just forgot this (solution by erik at bottom) and that it
would work but it's not. Putting a second div inside the wrapper div is
just like putting any other div inside the wrapper. That's the point of
the wrapper is to put other divs inside it...I need another background
image inside the wrapper and for other divs inside the wrap to stay on
top (overlap) of the second, bottom background image. Read my original
question again folks for more explanation.
Today I tried nesting the div (with the second wrapper background image)
inside the #wrapper.
This is closely the css I used:
margin: 0 auto;
background: #777 url(images/wrap_gradient.jpg) repeat-x 0 0;
bottom: 0; left: 0
background: url(images/second-bg.jpg) no-repeat bottom left;
I also tried adding position: relative to the #secondBG...I also tried
using z-index but I might have not done it correctly?
I dont have the exact code with me..This is a site Im building at work
and Im at home now.
>> I have a #wrapper div that will need 2 different images in it. 1
>> image is a horizontally repeating tiled gradient at the top then the
>> bottom image is as wide as #wrapper and about 200 pixels tall...
>> Is there a way to have 2 background images within 1 div? Should I
>> code it as a list within the wrap div somehow?
>> I have seen this before. Does anyone know of a good
>> reference/tutorial for this?
>> Or should I just make the background image of the wrap div the top
>> repeating gradient backgound and add the bottom image in through the
>> What is the best semantic way to do this?
I tried this thinking "duhh, i forgot this" but it doesnt work...or I'm
not doing it correctly.
> Erik Dahlgren wrote:
> The easiest would probably be to put a second div inside the #wrapper,
> align it to the bottom of #wrapper, and set it to have the second
> image as it's background. It is not one div with two backgrounds, but
> visually you wouldn't know.
> Hope this helps.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/