problema con una imagen de fondo

Hola amigos.
Mi problema es el siguiente:
con la plantilla sobre la que estoy trabajando tengo dos margenes a cada lado del contenido
en el margen izquierdo tengo colocada una imagen.
Quiero colocar otra igual en el otro margen volteada para q haga un efecto simetrico.
pero no consigo q me salgan las 2.
Este es el codigo q tengo puesto para q salga la imagen de la izquierda.

#container {
width: 1020px;

margin-left: auto;
margin-right: auto;
height:100%;
background: #E8E8E8 url('images/menubottom.jpg') no-repeat bottom left;
border:1px solid #8D8D8D;
}

Lo q estoy tratando de hacer es duplicar este codigo cambiando la imagen por la q he volteado y left por right.
Pero al hacer esto solo me marca la de la derecha.

Haber si me podeis aconsejar por que de codigo estoy un poco verde y no consigo dar con el error.

Muchas gracias.

A mi se me ocurre una cosita, pero no se si te valdrá (espero que si).

Primero defines 2 DIV's: uno para la izquierda (que será el que esté en el fondo) y otro para la derecha (al que le asignaremos la propiedad float:right)

Pongamos, por ejemplo, que son: #container (para el fondo) y #caja2 (para la dere).

Vamos a poner el contenido dentro de #caja2.
Imaginemos que las imágenes tienen un ancho de 300px.
El CSS quedaría así (salvo error u omisión :wink: ):

#container {
width: 100%;
....
background: #E8E8E8 url('images/menubottom.jpg') no-repeat bottom left;
border:1px solid #8D8D8D;
}

#caja2 {
...
background: url('images/menubottom.jpg') no-repeat bottom right;
border:1px solid #8D8D8D;
}

Lo de quitarle el color es para que no tape (si es que se superponen) la imagen de la izquierda.

Así, el HTML quedaría:

...
<div id="container">
<div id="caja2">
Lo que haya que poner aquí
</div>
</div>
....

Ojito, que no lo he probado, ¿eh? pero en principio yo lo pondría así, a ver qué pasa.

Yo, también de cabeza :lol: haria tres capas.

#uno .- Que lo contiene todo.
#dos .- La de la izquierda
#tres.- La de la derecha.

body {text-align:center ; }
#uno { width:800px ; margin: 4px auto ; background-color: orange ; }
#dos {float: left ; width:100px ; backround-color: red ; clear: none}
#tres {float: right ; width: 100px ; background-color: green ; clear:none}

El contenido del centro iría en la uno, al igual que las capas dos y tres.

<div id="uno">
<div id="dos">contenido de la izquierda</div>
<div id="tres">contenido de la derecha</div>


aqui los contenidos que van entre las capas laterales</p>
</div>

Igual le faltan cosas, pero por ahí van los tiros. Lo de clear hace que permita que haya elementos a los lados. No recuerdo muy bien si has de ponerle "none" (ningun lado) o "both" (ambos lados), haz la prueba y ya nos dirás.. oki?. :wink: