background

<div class="wrapper">
  <div class="box-1 box">
    TEXT
  </div>
  <div class="box-2 box">
    TEXT
  </div>
</div>

.box-1 {
  background: url(/maritozzo.png) center;
  background-size: cover;

  /** @@ */
  background-clip: text;
  /* Chromeではベンダープレフィックスが必要 */
  -webkit-background-clip: text;
  /* 背景を見せるため、テキストは透明にする */
  color: transparent;
  /** /@@ */
}
.box-2 {
  background: linear-gradient(
    64.3deg,
    rgba(254, 122, 152, 0.81) 17.7%,
    rgba(255, 206, 134, 1) 64.7%,
    rgba(172, 253, 163, 0.64) 112.1%
  );

  /** @@ */
  background-clip: text;
  /* Chromeではベンダープレフィックスが必要 */
  -webkit-background-clip: text;
  /* 背景を見せるため、テキストは透明にする */
  color: transparent;
  /** /@@ */
}

.box {
  font-size: 96px;
  font-weight: 900;
  text-align: center;
  width: 100%;
  height: 150px;
}

.wrapper {
  display: flex;
}

<div class="wrapper">
  <div class="box box-1">
    <div class="inner">
      <div class="title">fixed</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div class="box box-2">
    <div class="inner">
      <div class="title">local</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div class="box box-3">
    <div class="inner">
      <div class="title">scroll</div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

.box-1 {
  background-attachment: fixed;
}
.box-2 {
  background-attachment: local;
}
.box-3 {
  background-attachment: scroll;
}

.box {
  background-image: url(/maritozzo.png);
  overflow-y: scroll;
  height: 9rem;
  width: 12rem;
  word-break: break-all;
  border-radius: 4px;
  border: 1px solid rgb(229, 231, 235);
  padding: 16px;
  text-align: center;
  font-family: monospace;
  font-size: 14px;
  color: white;
}
.inner {
  background: rgba(128, 128, 128, 0.498);
  backdrop-filter: blur(2px);
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.title {
  font-size: 18px;
  font-weight: 700;
}