poner una imagen encima de la otra, y texto

[ryu_on_ice]

como puedo poner una imagen que va de fondo, y luego poner una encima de la que esta de fondo. es decir, la imagen que esta de fondo viene siendo el contenedor de lo que la web, la que quiero poner encima de esta es otra imagen que simula 3 columnas, y pues encima de estas 3 columnas poner ya el texto, o tal ves otra imagen pequeña ...

estoy intentadole asi...este es mi codigo:

Código HTML:

BODY {
    background: url(images/fondo.jpg) center center repeat fixed;
}


#contenedor {
   background: url(images/contenedor.jpg) center center no-repeat;
		
	MARGIN: 0px auto; 
	WIDTH: 775px; 
	HEIGHT: auto; 
}

.principal {
background: url(images/inicio_cajas.jpg) center center no-repeat;
	
	PADDING-RIGHT: 10px; 
	PADDING-LEFT: 10px; 
	PADDING-BOTTOM: 10px; 
	PADDING-TOP: 10px; 

	MARGIN: 0px 5px 0px 10px; 

	WIDTH: 730px; 
	HEIGHT: auto;
	}

#derecha {
			
	PADDING-RIGHT: 5px; 
	PADDING-LEFT: 5px; 
	PADDING-BOTTOM: 5px; 
	PADDING-TOP: 5px; 
	
	FLOAT: right; 
	
	MARGIN: 0px 2px 0px 0px; 
	WIDTH: 150px; 
	HEIGHT: auto; 

}

Con la body y #contenedor no hay problema, al poner la de #derecha no me respeta nada y se ajustan los textos de #derecha al tamaño de #principal...

alguien sabe como hacer eso??