<section>

  <h2>scroll</h2>

  <div class="section image bg-scroll">

    <p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>

    <p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>

  </div>

</section>

​

<section>

  <h2>fixed</h2>

  <div class="section image bg-fixed">

    <p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>

    <p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>

  </div>

</section>

​

<section>

  <h2>local</h2>

  <div class="section image bg-local">

    <p>We believe that a real programmer must understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the level of the problem and above, not just at a code level.</p>

    <p>Given how many study materials, courses, and books are available, the main question a beginner faces nowadays is not “where do I study?” but “what should I study and in what order?” There are many opinions on this subject. Some advise starting with mathematics, some advise specific languages and technologies.</p>

  </div>

</section>

body {

  display: grid;

  grid-gap: 30px;

  grid-template-columns: 1fr 1fr;

​

  font: 14px/1.5 monospace;

}

​

.section {

  height: 200px;

  padding: 10px 50px;

  overflow-y: auto;

  font-size: 18px;

  box-sizing: border-box;

​

  background: #ffeb3b;

}

​

.image {

  background-image: url("https://assets.codepen.io/1425525/Hexlet_Logo-01-svg__1_.png");

  background-repeat: no-repeat;

  background-position: center;

}

​

.bg-scroll {

  background-attachment: scroll;

}

​

.bg-fixed {

  background-attachment: fixed;

}

​

.bg-local {

  background-attachment: local;

}