Is there a way to spread one image across a collapsible div and its parent div?

Viewed 580

In this JSFiddle, I have a button with an image in the background. If you click the button, a collapsed column springs out from the bottom.

What I'm looking to do is have that same background image dynamically re-size to fit the entire un-collapsed div once it's un-collapsed. Now, I understand that I could do a call like

$(this).addClass('imageUpdate');

when I want dynamically change the CSS for the header/button div, but this isn't exactly what I'm looking to do; I want the image to resize but to also map itself across the entire expanded column (and the header that it drops down from).

Is there any way that I can get around doing this? Or, as I suspect, can I not have an image span across multiple divs? If this is the case, what alternative would you recommend in order to achieve my goal? Thanks!

HTML

<div class="col-md-3" id="left-accordion">
  <!-- first set of buttons -->
  <div class="panel panel-default">
    <div class="panel-heading" role="button" data-toggle="collapse"  data-target="#baselayer">CLICK ME<br/>
      <span style="font-size:1.25em;color:#fff;" class="glyphicon"></span>
    </div>

    <div class="collapse" id="baselayer">

      <div class="well selections base-buttons" id="softbutton" role="button">Bulbasaur<br/>
        <div class="selected">

        </div>
      </div>

      <div class="well selections base-buttons" id="medbutton" role="button">Charmander<br/>
        <div class="selected">

        </div>
      </div>

      <div class="well selections base-buttons" id="firmbutton" role="button">Squirtle<br/>
        <div class="selected">

        </div>
      </div>

    </div>
  </div>
</div>

CSS

.panel-default > .panel-heading {
    color: #fff;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%;
    border: none;
}
2 Answers
Related