<div id="container">
  <h3>background-attachment</h3>
  <h4>scroll</h4>
  <div id="scroll" class="block"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac feugiat sed lectus vestibulum mattis ullamcorper. Elit duis tristique sollicitudin nibh sit amet commodo. Interdum consectetur libero id faucibus nisl. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam ut venenatis tellus in metus vulputate eu. Laoreet id donec ultrices tincidunt arcu non. Pharetra pharetra massa massa ultricies mi. Enim facilisis gravida neque convallis a cras semper auctor neque. Venenatis lectus magna fringilla urna porttitor. Dignissim cras tincidunt lobortis feugiat vivamus at. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Pulvinar neque laoreet suspendisse interdum consectetur libero. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Sed turpis tincidunt id aliquet risus.</p></div>
  <h4>fixed</h4>
  <div id="fixed" class="block"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac feugiat sed lectus vestibulum mattis ullamcorper. Elit duis tristique sollicitudin nibh sit amet commodo. Interdum consectetur libero id faucibus nisl. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam ut venenatis tellus in metus vulputate eu. Laoreet id donec ultrices tincidunt arcu non. Pharetra pharetra massa massa ultricies mi. Enim facilisis gravida neque convallis a cras semper auctor neque. Venenatis lectus magna fringilla urna porttitor. Dignissim cras tincidunt lobortis feugiat vivamus at. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Pulvinar neque laoreet suspendisse interdum consectetur libero. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Sed turpis tincidunt id aliquet risus.</p></div>
  <h4>local</h4>
  <div id="local" class="block"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac feugiat sed lectus vestibulum mattis ullamcorper. Elit duis tristique sollicitudin nibh sit amet commodo. Interdum consectetur libero id faucibus nisl. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam ut venenatis tellus in metus vulputate eu. Laoreet id donec ultrices tincidunt arcu non. Pharetra pharetra massa massa ultricies mi. Enim facilisis gravida neque convallis a cras semper auctor neque. Venenatis lectus magna fringilla urna porttitor. Dignissim cras tincidunt lobortis feugiat vivamus at. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Pulvinar neque laoreet suspendisse interdum consectetur libero. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Sed turpis tincidunt id aliquet risus.</p></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");

/* Стили, относящиеся к данному примеру */

#scroll {
  background-attachment: scroll;
  background-image: url(https://images.unsplash.com/photo-1493286825465-8b922d030e9c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
}

#fixed {
  background-attachment: fixed;
  background-image: url(https://images.unsplash.com/photo-1510665724063-f77a01074aa2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}

#local {
  background-attachment: local;
  background-image: url(https://images.unsplash.com/photo-1462396240927-52058a6a84ec?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
}

/* Остальные стили */

body {
  font-family: Inconsolata;
  background-color: #f5f5f5;
}

#container {
  padding: 16px 48px;
  width: 70%;
}

h3 {
  font-size: 24px;
  font-size: 20px;
  font-weight: bold;
  color: #39a1f4;
  padding: 16px;
  background: rgba(255,255,255,.9);
 }

h4 {
  font-size: 24px;
  font-weight: normal;
  line-height: 1;
  margin: 16px
}

.block {
  height: 128px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  resize: both;
  overflow: auto;
  margin-bottom: 24px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 12px;
}

.block p {
  margin: 0;
  font-size: 14px;
  color: rgba(0,0,0,.5);
}

#fixed p {
  color: rgba(255,255,255,.5);
}

.blend {
  background-image: url('image.png');
  background-color: green;
  background-blend-mode: luminosity;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js