Previous Message
Next Message

2 images in wrap div...

Sent by David on 30 March 2005 04:04


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:

#wrap {
    position: relative;
    width: 680px;
    margin: 0 auto;
    text-align: left;
    background: #777 url(images/wrap_gradient.jpg) repeat-x 0 0;
}
#secondBG {
    position: absolute;
    bottom: 0; left: 0
    width: 680px;
    margin: 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.


David wrote:

>> 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 
>> xhtml?
>> 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.
>
> Erik
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: