Make two background images responsive alongside divs with CSS

Question

I am struggling with getting 2 background images to shrink in sync with each other, so my seat plan will work on mobile/tablets.

I have tried background cover, contain, 100% and setting other div values to 100% but no joy with keeping those seats positioned in place.

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.

Here is the original static width code I am working with https://jsfiddle.net/kjyopdL8/

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

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

<div id="theatre">
  <div class="container">
    <div id="bmessage">Select the seats that you need.</div>
    <div id="seats">
      <div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>       
      <div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div>
      <div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>       
      <div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"></div>
    </div>
  </div>

Answer 1

theres a lot of error on your css. dont give fix width on your container if you want it to be responsive. ive edited your fiddle and came up with this: https://jsfiddle.net/kjyopdL8/4/

#seats:before {
    content: '';
    display: block;
    padding: 50%;
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
    background-image: url(http://i.imgur.com/qn56yss.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

take a look at the pseudo selector before. it did the trick!