Tengo este css

#wrapper1 {
min-width:1020px;
min-height:100%;
}
#wrapper2 {
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat;
}
#wrapper3 {
width:1020px;
margin:0 auto;
}

y este html:

<div id="wrapper1">
 <div id="wrapper2">
   <div id="wrapper3" class="clearfix" <!-- content here -->
        <p>blah blah blah</p>
   </div>
 </div>
</div>

Necesito agregar 2 imágenes: izquierda y derecha desde la columna central sin cambios en el ancho de la columna central y que las imágenes no afectaron el ancho general de la página. Ejemplo:

Puedo añadir imágenes, e hice algunos intentos.

Cuando intento cambiar el ancho del navegador, las imágenes de fondo van debajo de la columna central.

Traté de cambiarmin-width:1020px; to min-width:1665px; - a primera vista, todo está bien, pero para la resolución de la pantalla - menos de 1665px todo el contenido se desplaza a la derecha, probé algunas opciones pero sin éxito

Mi pregunta: ¿Puedo colocar una imagen para que cuando cambie el ancho del navegador, reduzca la distancia a la izquierda y la derecha de la columna central (este es el comportamiento predeterminado si no hay imágenes de fondo)?

Aquí está el código con ejemplos de imágenes.

Si hago 1 imagen grande con1020px ponga la parte central en blanco y coloque mis imágenes izquierda / derecha en ella ... ¿funcionará?