PDA

View Full Version : Resolved Cant figure out this simple css problem



kevinkhan
Apr 25th, 2010, 01:40 PM
Ok on this website http://www.corkdesigns.ie/a2b/www/
my background top image isnt appearing :(

The css associated with this is below..

when i remove the #bgBottom class the top image appears..

is there some conflict between these to classes

I cant figure it out :(



#bgTop
{
background: #0058A4 url(images/topBg.gif) no-repeat 0 0;
margin: 0 auto;
background-position:center;
background-position:top;
overflow:hidden;
height:100%;
}

#bgBottom
{
background: #0058A4 url(images/bottomBg.jpg) no-repeat 0 0;
margin: 0 auto;
background-position:center;
background-position:bottom;
overflow:hidden;
height:100%;
}
how come the top image isnt visible
when i remove the #bgBottom the top image apears

ahayzen
Apr 25th, 2010, 01:47 PM
Both layers are set to 100% so they are laying themselves on top of each other. You need to make the images background colour transparent and then put the bgTop and bgBotom on different z-index layers.

Andy

kevinkhan
Apr 25th, 2010, 01:49 PM
Both layers are set to 100% so they are laying themselves on top of each other. You need to make the images background colour transparent and then put the bgTop and bgBotom on different z-index layers.

Andy

That worked thanks..

Was trying to figure that out all morning lol :)