Zooming webpage then clicking back button changes the background size on the previous page

Question

I have two webpages that consist of a scrollable div as the main wrapper and an image background styled like

body
{
background: url("../Images/background.jpg") center bottom no-repeat;
z-index:-5; 
background-size:cover;
}

When I zoom in or out, the scrollable div changes sizes and the background does not. That is exactly what I want to happen.

However, if I zoom in on one page then click the browser's back button, the background is zoomed out on the previous page. If I refresh the page the background is fixed and everything is displayed correctly again. If I zoom then click a link to the previous page instead of clicking back in the browser window, the page is displayed correctly. I have tried using the hidden field

<input type="hidden" id="refresh" value="no"/>

with the following script

<script type="text/javascript">
$(window).load(function (e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
</script>

to reload the page one time after its initial load hoping that the background would resize, but it does not. only clicking the browser refresh button will fix it. Any suggestions as to how to handle this would be extremely helpful.

Answer 1

使用$(window).resize()评分器而不是$（window）.load（）`，如果问题出在缩放或调整大小上可能会有所帮助