Hi.

TAKE A LOOK AT: http://i.imgur.com/SVosv.jpg after you've read the text.

What I want here, is a 400px high div with a background filling the full width and the other div under with another background.
These divs should just be the backgrounds, and my content on the page shouldnt affect any of these div's in any way.

The background div's in my case is #förstabg and #andrabg.


I'm not sure if im doing right with this but anyhow a problem occured.

#andrabg wich is my second background is not behind my imageslider wich is #slider.

What am I going to do?



HTML:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AirWipp</title>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
<link href="css/reset.css" rel='stylesheet' type='text/css'>

</head>

<body>



<div id="förstabg">


<div id="upper">


<div id="mainlogo">

<img src="images/logo.PNG" width="359" height="56" />

</div><!---MAINLOGO SLUT--->

<div id="meny">

</div><!---MENY SLUT--->


</div><!---UPPER SLUT--->


<div id="slidercontainer">

<div id="slider">

</DIV><!---SLIDER SLUT--->


</div><!---SLIDERCONTAINER SLUT--->



</div><!---FÖRSTABG SLUT--->



<div id="andrabg">

</div><!---ANDRABG SLUT--->


</body>
</html>

CSS:

Code:
body { background-color: #101112; background-image:url(../images/dirtTextureBgTile.png); background-repeat:repeat-x; background-position: center top; min-width: 960px; min-height: 100%;}

#förstabg {background-image:url(../images/headerHomeBgTile.png);  max-width:100%; max-height:450px; padding-top:1px;  }

#andrabg {background-image:url(../images/Undermitter.png);  max-width:100%; height:450px;  }

#upper {width:960px; margin:0 auto; height:70px; margin-top:50px; }

#mainlogo { height:70px; float:left; }

#meny{ height:70px; width:500px; float:right; background-image:url(../images/tapeTopnavBg.png); background-repeat:no-repeat; background-color:transparent }

#slidercontainer {
	padding: 35px 0 112px 0;
	background-image:url(../images/heroLightingBg.png);
	background-repeat:no-repeat;
	background-position: top center;
} 

#slider {width:960px; height:400px; margin:0 auto; background-image:url(../images/Slidertest.jpg); background-color:#CCFF66; }