imagen sobre otra imagen con css?

[oscarza]

Código:

<style type="text/css">
<!--

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	width:800px;
	margin:auto;
	height:500px;
	/margin-top:150px;


}

#contenedor {
	/*left:185px;*/
	/*top:44px;*/
	width:800px;
	height:500px;
	margin:auto;
	margin-top:150px;
	background-image:url(azul.png);
	

}
#logo {
	position:relative;
	margin-top:9px;
	width:65px;
	height:67px;
	float:right;
	margin-left:5px;
	margin-right:5px;
	background-image:url(logo.png);

}
#menu1 {
	position:relative;
	margin-left:100px;
	margin-top:33px;
	width:260px;
	height:25px;
	float:left;
}

#menu1 a{
	float:left;
}
#menu2 {
	position:relative;
	margin-right:105px;
	margin-top:33px;
	width:260px;
	height:25px;
	float:right;
}

#menu2 a{
	float:right;
}
#header{
	width:800px;
	height:77px;
	background-image:url(header.png);
	background-repeat:no-repeat;
	}
	
	#main{
		width:800px;
		height:246px;
		margin-top:5px;
		
	
		}
		
		#boton1{
			margin-left:100px;
			height:121px;
			width:105px;
			margin-right:5px;
			background-image:url(botongr.png);
			margin-bottom:3px;
			}
			#boton2{
			margin-left:100px;
			height:121px;
			width:105px;
			margin-right:5px;
			background-image:url(botongr.png);
			margin-bottom:3px;
			margin-top:3px;
			}
			#izquierda{
				position:relative;
				width:210px;
				height:246px;}
				
				
				
				#boton3{
			
			height:121px;
			width:105px;
			
			background-image:url(botongr.png);
			margin-bottom:3px;
			}
			#boton4{
			
			height:121px;
			width:105px;
			
			background-image:url(botongr.png);
			margin-bottom:3px;
			margin-top:3px;
			}
			#derecha{
				position:relative;
				width:383px;
				height:246px;
				float:left;
				margin-right:5px;}
				
				#derecha2{
				position:relative;
				width:383px;
				height:246px;
				float:left;
				margin-right:5px;
				z-index:20;
				
				}
#centro {
	position: relative;
	height: 246px;
	width: 105px;
	
}

#izquierda, #centro, #derecha { float:left;}

#grad {
	position:absolute;
	left:508px;
	top:232px;
	width:252px;
	height:247px;
	z-index:8;
	padding-left:135px;
	
}

#featured{
	position:absolute;
	width:290px;
	height:246px;
	float:left;
	z-index:13;
	margin-left:300px;
	margin-right:210px;
	margin-top:80px;
	margin-bottom:0px;
	background-image:url(featu.png);
	/margin-top:82px;
	clear:both;
}

ul li{
	list-style:none;
	display:inline;
	margin-left:0px;}
	
	#footer{
		position:relative;
		margin-top:10px;
		width:500px;
		height:40px;}

-->
</style>