title: Make two background images responsive alongside divs with CSS
body: <p>I am struggling with getting 2 background images to shrink in sync with each other, so my seat plan will work on mobile/tablets.</p>
  
  <p>I have tried background cover, contain, 100% and setting other div values to 100% but no joy with keeping those seats positioned in place.</p>
  
  <p>So not only does the background image need to shrink for the seatplan below 650px, but also the seat images do too - they need to maintain their position on the seat plan. The containing divs are currently set at 15px to display the seat images.</p>
  
  <p>Here is the original static width code I am working with
  <a href="https://jsfiddle.net/kjyopdL8/" rel="nofollow noreferrer">https://jsfiddle.net/kjyopdL8/</a></p>
  
  <p><strong>The seat sizes should be 15px in size until the seatplan goes below 650px, then the seats images shrink in sync with the main seatplan image whilst remaining in the same position and proportion</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#theatre {
    width: 650px;
    float: left;
    padding-right: 5px;
    margin: 25px 15px 0 10px;
  }
  
  .container {
    width: 100%;
    margin: 0 auto;
  }
  
  #bmessage {
    padding: 1px 3px;
    height: 20px;
    font-size: 14px;
    background: #ddf;
    color: #080;
    font-weight: bold;
  }
  #seats:before {
    content: url('http://i.imgur.com/qn56yss.gif');
  }
  
  #seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
  }
  
  #seats div {
    position: absolute;
    width:15px;
    height:15px;
  }
  
  #seats .s1.std.grey {
    background: url('https://s3.postimg.org/g9dq32nqr/1_1_2.png') no-repeat center top;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="theatre"&gt;
    &lt;div class="container"&gt;
      &lt;div id="bmessage"&gt;Select the seats that you need.&lt;/div&gt;
      &lt;div id="seats"&gt;
        &lt;div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"&gt;&lt;/div&gt;       
        &lt;div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"&gt;&lt;/div&gt;
        &lt;div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"&gt;&lt;/div&gt;       
        &lt;div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>