JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
  <img src="https://i.redd.it/x7hdjnmupu901.jpg">
</div>


It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>
It behaves as a background<br>

CSS

body{ 
  margin:0px;
  background-color:#ff9999;
  color:white;
}

#background{
    width:100%;
    position:fixed;
    z-index:-1
}

#background img{width:100%;}

/* the body fade becomes visible only when the image is bigger than the viewport */
body::after{
    background-image:  linear-gradient(to bottom, transparent, #ff9999);
    content:'';
    display:block;
    height:50px;
    bottom:0px;
    position:fixed;
    width:100%;
    z-index:-1;
}

#background::after{
    background-image:  linear-gradient(to bottom, transparent, #ff9999);
    content:'';
    display:block;
    height:50px;
    bottom:0px;
    position:absolute;
    width:100%;
}