title: How to add two background images - left and right from center column
body: <p>I have this css:</p>
  
  <pre class="lang-css prettyprint-override"><code>#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;
  }
  </code></pre>
  
  <p>and this html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wrapper1"&gt;
   &lt;div id="wrapper2"&gt;
     &lt;div id="wrapper3" class="clearfix" &lt;!-- content here --&gt;
          &lt;p&gt;blah blah blah&lt;/p&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/rAy6M.png" alt="Example Image"></p>
  
  <p>I can add images, and made a some attempts</p>
  
  <ol>
  <li><p>when I try to change browser width - background images go under the central column <img src="https://i.stack.imgur.com/acJnL.png" alt="Image"></p></li>
  <li><p>I tried to change <code>min-width:1020px; to min-width:1665px;</code> - 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</p></li>
  </ol>
  
  <p>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)</p>
  
  <p><a href="http://phpfiddle.org/main/code/zqz-jh8" rel="noreferrer">Here is code with images examples.</a> </p>
  
  <p>If I make 1 big image with <strong>1020px</strong> blank center part and put my left/right images into it.. will it work?</p>