CSS Forum

**TheStalker** · 04-27-2010, 04:05 PM

Hi all,

Im new to this forum and pretty new to css so i hope you guys can help me out a bit.

ok, so on a site i have made i have two divs that have an image each set as their backgrounds (mirrored) one positioned left and one right. background-position: left bottom ; & background-position: right bottom ;

My problem is when the window (browser) is resized the two backgrounds overlap each other making it look like a right mess. I tried using the overflow: hidden; but with no joy.

here is the css for the two divs.

Code:

#back1{
    background-image:url('../images/background2.PNG');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: left bottom ;
    background-attachment: fixed;
    overflow: hidden; 

}
#back2{
    background-image:url('../images/background3.PNG');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: right bottom ;
    overflow: hidden;
}

the second problem i have is with Safari the background divs dont seem to sit at the bottom of the page they look like they hoover about 50+px from the bottom of the page. It seems to be fine in firefox and ie(compatibility mode on)

If any one can help id be very thankful

**chrishirst** · 04-27-2010, 04:11 PM

URI needed to debug.

**Madman340** · 04-27-2010, 06:11 PM

Problem 1:
Set the z-index of the one you want to be on top to 1. Note: In order for z-index to work, the "position" attribute must be in use.

Problem 2:
As chris said we will need to know more information such as the URI (Is it XHTML 1.0 Transitional, etc) and if you could please upload it so we can access it and debug it.

**LadynRed** · 04-28-2010, 02:34 PM

There might be a better solution that relying on positioning and the buggy z-index (in IE) for this, but need to see the page.

**TheStalker** · 04-28-2010, 04:33 PM

Hi thanks for the replys. The page is www.hair-21.co.uk

and it's <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

thanks

**TheStalker** · 04-28-2010, 04:34 PM

should of posted the address before but was only testing on my local computer at the time. It should give you all an idea of what i'm trying to do when u look at the page.

**LadynRed** · 04-28-2010, 08:12 PM

Ok, you should take a look at this article then:
http://css-tricks.com/multiple-backg...nd-right-half/