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