This is basically a “parallax” which is a fixed image that stands still on scroll. It is recommended to use a large image to take a good effect over the cover background.

<section class="parallax-container">
  <div class="parallax" style="background-image: url('IMAGE URL')"></div>
  <div class="content">
    <h1>Hello world</h1>

You can also customize the size of the parallax:

<section class="parallax-container">
  <div class="parallax small|medium|large"></div>


Hello world

Example on live site:

Click here