I am currently working on a website, and the client has requested that the background scales up or down depending on the browser size. I have managed to achieve this partially using some jQuery hacks to adjust element sizes as the browser is resized, but I would prefer a CSS-only solution. There are 3 images involved - one central image with a fixed aspect ratio that should always be fully visible, and two side images that continue the pattern.
Any advice on how to accomplish this using CSS only would be greatly appreciated!
This is the JavaScript code snippet I have been using:
<script type="text/javascript">
$(document).ready(function () {
fixBg();
});
$(window).load(function () {
fixBg();
});
$(window).resize(function () {
fixBg();
});
function fixBg()
{
var mh = Math.max($(window).height(), 768);
if ($("#ControlBar").length > 0) {
mh -= 54;
}
var mw = Math.round((mh / 768) * 1264);
var winW = Math.max(1264, $(window).width());
$("#bgCenter").height(mh).width(mw);
$("#shade").height(mh).width(mw).css("left", ((winW - mw) / 2) + 10);
var extra = ((winW - mw) / 2) + 10;
$(".bgFillers").width(extra).height(mh);
var bgw = (mh / 768) * 360;
$(".bgFillers").css("background-size", bgw + "px " + mh + "px");
//$("#siteContent").css("min-height", mh - $("#header").height() - $("#footer").height() - 20);
}
</script>
Below is the basic HTML markup structure:
<div id="master">
<div id="bg">
<div id="bgLeft" class="bgs bgFillers"></div>
<div id="bgCenter" class="bgs">
</div>
<div id="bgRight" class="bgs bgFillers"></div>
</div>
<div id="shade"></div>
<div id="centeredSite">
</div>
</div>