Currently, I am facing a challenge with scaling background images within a shared div (framework) so that they can resize along with the browser. I have searched for solutions involving Javascript, but none seem to address my specific case. Any assistance would be greatly appreciated.
To view the page where I am experiencing this issue, please click here.
HTML
<div id="workcontent">
<div class="work">
<div class="subnav"></div>
<a href="ggwp.html">
<div class="framework" style="height: 1085px; transform: translateZ(0px) translateX(0px) translateY(0px);">
<div class="ggwp-img"></div>
<div class="workblock"></div>
<div class="workblock-text"><h1>GGWP</h1></div>
<div class="workblocktwo"></div>
</div>
</a>
CSS
.work {
background: #141414 none repeat scroll 0 0;
margin: 0px;
height: 100%;
text-align:left;
white-space: nowrap;
overflow:auto;
overflow-y:hidden;
border: 1px solid;
background: #141414 none repeat scroll 0 0;
}
.framework {
height: 20px;
width: 400px;
border: 1px red solid;
display: inline-block;
}
.ggwp-img {
background-color: rgb(34, 34, 34);
background-image: url('images/ggwp.jpg');
background-size: cover; opacity:0.25;
position: relative;
}