I have this css:

```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;
}

```

and this html:

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

```

I need to add 2 images - left and right from center column without center column width changes and that the images did not affect the overall width of the page.
Example:

![Example Image](https://i.stack.imgur.com/rAy6M.png)

I can add images, and made a some attempts

1. when I try to change browser width - background images go under the central column ![Image](https://i.stack.imgur.com/acJnL.png)
2. I tried to change `min-width:1020px; to min-width:1665px;` - at first glance, all is well, but for the screen resolution - less than 1665px all content is shifted to the right
I tried a few options but unsuccessfully

My question: сan I place an image so that when you change the width of the browser - reduce distance to the left and right of the center column (this is the default behavior if no background images)

[Here is code with images examples.](http://phpfiddle.org/main/code/zqz-jh8) 

If I make 1 big image with **1020px** blank center part and put my left/right images into it.. will it work?