How to correctly execute a script?

Question

JavaScript

Hello!
I made a test site - 4.fishouk.z8.ru
At the bottom of the site there is a block of a button and a large picture background. In order for the picture to stretch normally to the entire width of the block, I wrote a jQuery script

$(document).ready(function(){        
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });
    $(window).load(function(){        
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });
    $(window).resize(function () {       
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });

And it works, but when I click on the "Home" button and the page refreshes, the script doesn't work. Pliz help me with this. bonus to karma)

Answer 1

If you don't want css, do this:

$(function(){        
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);

    $(window).resize(function () {       
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });
});

Answer 2

Anyway, the script does not work correctly for you, because the picture is 1600, and you have 1100 added, well, in this case it is better to abandon JS

.buttonSection
{
background-size: cover;
height: 100%;
max-height: 1000px;
}

Cover - stretches the image to full width, and the height is max. will give the same effect as with your script