JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <div class="fixed"><div></div></div>
    
    <br/><br/><br/>

    <div class="notfixed"></div>
    
    <button id="smaller">Make it smaller</button>
</body>

CSS

body {
    height: 7000px;
}

#smaller {
    position: absolute;
    top: 0;
}

.fixed {
    height: 250px;
    width: 250px;
    position: relative;
}

.fixed > div {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    clip: rect(0px, 250px, 250px, 0px);
}

.fixed > div::before {
    content: '';
    position: fixed;
    height: inherit;
    width: inherit;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
    z-index: -1;
}

.notfixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
}

JavaScript

$(document).ready(function(){
    $('#smaller').click(function(){
        var oldHeight = $('.fixed').height();
        
        $('.fixed, .notfixed').css('height', oldHeight/1.25 +'px');
        
        /* only for demo purposes for the 'make smaller' functionality */
        $('.fixed > div').css("clip", "rect(0px," + $('.fixed').width()  + "px," + $('.fixed').height()  + "px,0px)")        

    });
});