<h2>scroll (default)</h2>
<div class="scroll"><div class="area"></div></div>

<h2>fixed</h2>
<div class="fixed"><div class="area"></div></div>

<h2>local</h2>
<div class="local"><div class="area"></div></div>

body {
  height:150vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right:60px;
}

h2 {
  position: relative;
  text-align: center;
  top:-180px;
  left:16%;
}

.scroll, .fixed, .local {
  height: 250px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.area {
  height: 500px;
  width: 100%;
}

.scroll {
  background: url('https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg');
  background-attachment: scroll;
}

.fixed {
  background: url('https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg');
  background-attachment: fixed;
}

.local {
  background: url('https://lenadesign.org/wp-content/uploads/2019/12/female-web-dev.jpg');
  background-attachment: local;
}