single background for child elements

How do I set the one background for all inner-blocks

<div class="outer-block">
   <div class="inner-block"></div>
   <div class="inner-block"></div>
   <div class="inner-block"></div>
</div>

To make it look like in the photo

In the example with the photo, I used the property:
background-attachment: fixed;

.outer-block {
  position: relative;
  overflow: hidden;
}

.inner-block {
  background-image: url('./dsa.jpg');
  width: 100%;
  height: 200px;
  margin: 10px;
  background-size: contain;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

But this implementation has a drawback. When scrolling the page, the image remains fixed relative to the page.
Task: make sure that when scrolling, the internal blocks and the image move synchronously (expected behavior)

>Solution :

Use pseudo element positioned relatively to the container and clipped at child level

.outer-block {
  position: relative; /* relative on the container */
  width: 300px;
}
.inner-block {
  height: 150px;
  clip-path: inset(0); /* clip-path on the child */
  margin: 10px;
}
/* your background */
.inner-block:before {
  content:"";
  position: absolute;
  inset: 0;
  background: url(https://picsum.photos/id/1/200/600) center/cover;
}
/**/

body {
  background: lightblue;
}

<div class="outer-block">
  <div class="inner-block"></div>
  <div class="inner-block"></div>
  <div class="inner-block"></div>
</div>