Search code examples
htmlcssmedia-queriesflexbox

Shrinking background image in sync with Div size reduction

I have a ticket site with a fixed width of 650px that I am trying to display better on mobiles and make responsive.

The booking system has divs (auto generated by the server) overlaying a venue image that is set as a background image url. The problem is if I set certain div widths to 100% such as the container or background image url, all the divs then go all out of place and will not align as originally set against the fixed width.

https://jsfiddle.net/04my0hvc/ Screenshot https://s9.postimg.org/qdh8ihdlr/screenshot.jpg

Could flexbox shrink come into play here, or perhaps a Zoom option when going below 650px?

Some sample code is below but I cannot fully present all the code as the bulk is Javascript used to generate the divs too that I can't access. But please see JSFiddle and screenshot above.

  <div id="theatre">
      <div id="bmessage">Select the seats that you need.</div>
      <div id="seats" style="height:650px;background: url('http://i.imgur.com/qn56yss.gif') no-repeat center top;"><div class="s1 std grey" si="0" title="A16" style="top:75px; left:233px;"></div><div class="s1 std grey" si="1" title="A15" style="top:75px; left:251px;"></div><div class="s1 std grey" si="2" title="A14" style="top:75px; left:269px;"></div><div class="s1 std grey" si="3" title="A13" style="top:75px; left:287px;"></div></div>
Solution

  • You need to add a container div and then have the background image background-size property value set to contain.

    JSFiddle: https://jsfiddle.net/04my0hvc/1/

    HTML

    <div id="theatre">
 <div class="container">
    <div id="bmessage">Select the seats that you need.</div>
    <div id="seats" style="height:650px;background: url('http://i.imgur.com/qn56yss.gif') no-repeat top left; background-size: cover">
    <div class="s1 std grey" si="0" title="A16" style="top:75px; left:233px;"></div>       
    <div class="s1 std grey" si="1" title="A15" style="top:75px; left:251px;"></div>
    <div class="s1 std grey" si="2" title="A14" style="top:75px; left:269px;"></div>       
    <div class="s1 std grey" si="3" title="A13" style="top:75px; left:287px;"></div>
 </div>
</div>

    CSS

    .container {
  width: 80%;
  margin: 0 auto;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

    UPDATE

    Set the background-size property to contain