背景图片-如何仅使用CSS正确缩放

Question

I have this site in development, http://melanie.3drexstaging.com/ The client wants the background to scale up or down (to a point) depending on the browser size. I have gotten it to work halfway decent with some jquery hacks to adjust sizing of elements as the browser resizes, but I would much prefer a css only option. We have 3 images, one is the fixed aspect ratio center image that should always show in entirety, and to the left and right we have the images that continue the pattern.

Thanks in advance for any tips!

My SAD javascript hacks:

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

And the basic markup:

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

Answer 1

have you tried making the size relative?

you just use % instead of px (or any other option)

100% is full element, 50% is half your element (if you put it in a div you set to 50% it'll take half of the div that's taking up half of your page, so 1/4th of your page)

otherwise i'll need some more information