How to scroll content without moving `<body>` background-CodePudding

I am trying to make a page with a glass morphism effect. I don't want to move a background of the body. I want to move only .container. Is this possible? Here the code that I'm using:

Show code snippet

body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: #091921;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e91e63, #ffc107);
  clip-path: circle(22% at 30% 20%);
  z-index: -1;
}

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff, #da00ff);
  clip-path: circle(20% at 70% 90%);
  z-index: -1;
}

.container {
  margin: 50px 0;
  width: 60%;
  padding: 20px 40px;
  background-color: rgba(255, 355, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis vero placeat dicta reprehenderit quam soluta, nisi suscipit molestias voluptatibus itaque autem similique, quo ullam sint. Mollitia magnam quos rem veniam sit, nulla repellat
      ab saepe fugit, numquam necessitatibus vel qui consequatur unde autem cum repellendus dolorum harum veritatis dolor et natus perferendis dolore culpa. Nostrum veritatis accusamus molestias porro sint veniam officia! Harum eaque corporis aperiam
      nobis ea vitae animi consectetur libero sed nisi repellendus voluptatum illum voluptate veniam quisquam ullam, assumenda rerum tempora et ducimus, quod nam officia. Velit, dolores molestiae error laudantium minus consectetur natus vero ducimus esse
      voluptatibus delectus nam dolore tempore expedita ad pariatur repellendus rerum fugiat recusandae unde iste omnis repellat. Vero eos ex dolorum explicabo eum placeat rem, unde nobis id veritatis molestias harum beatae enim, obcaecati sed, provident
      iusto error minus quis? Tenetur aliquid ipsa illo tempora odio ab. Doloremque laudantium, officia accusantium non autem blanditiis incidunt alias. Debitis at ullam esse nihil! Est, hic quasi! Voluptas rem mollitia dolorum accusamus ipsa non ipsam
      odit quis debitis quasi aliquid tempore vel totam porro possimus ullam inventore sunt, in accusantium, maiores natus. Magnam, aut quaerat alias beatae commodi eum autem repellat accusamus esse in corrupti amet maiores dolorem maxime exercitationem
      omnis totam natus adipisci suscipit. Rerum maiores, nobis eligendi repudiandae doloremque mollitia deserunt praesentium expedita, odio fugiat quae quas. Laboriosam eaque rem praesentium quam vero fugit debitis, odio sed ad. Doloribus quod saepe
      nisi earum sapiente tempore expedita modi perspiciatis cum aut vitae, consequatur, eveniet ducimus totam quis amet, quam beatae? Harum corrupti iure odio perferendis corporis totam eos id autem neque, aut vero at repudiandae soluta quibusdam dolor,
      laborum molestias! Excepturi necessitatibus, incidunt saepe id voluptatibus sapiente mollitia, similique nulla in earum dignissimos porro quis beatae, molestiae recusandae eveniet minus cupiditate tempora! Error quo eum qui fugit itaque accusantium
      non ullam saepe sunt incidunt quidem quaerat ea eius doloribus possimus totam, tenetur quis mollitia. Porro, cumque vero modi quo architecto ullam commodi aspernatur repudiandae ipsum sunt dolorem neque fugiat vitae a ex nihil vel tenetur laborum
      eligendi aut rem. Magnam quidem soluta vero amet expedita. Officiis, laborum eveniet. Nobis, reiciendis natus! Optio, delectus! Voluptates, unde aliquid fuga odio perferendis at nemo qui quidem velit ullam tempora accusantium, molestias voluptatibus
      ratione libero laudantium illo, aperiam dolorum earum exercitationem quae neque voluptate! Nihil explicabo sed sequi provident neque repellat quia quasi, doloremque tempore repellendus.</p>
  </div>
</body>

</html>

CodePudding user response：

change position: absolute; to position: fixed; for your pseudo-elements. That will align the background to the top of the viewport instead of the body document.

Show code snippet

body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: #091921;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e91e63, #ffc107);
  clip-path: circle(22% at 30% 20%);
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff, #da00ff);
  clip-path: circle(20% at 70% 90%);
  z-index: -1;
}

.container {
  margin: 50px 0;
  width: 60%;
  padding: 20px 40px;
  background-color: rgba(255, 355, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis vero placeat dicta reprehenderit quam soluta, nisi suscipit molestias voluptatibus itaque autem similique, quo ullam sint. Mollitia magnam quos rem veniam sit, nulla repellat
      ab saepe fugit, numquam necessitatibus vel qui consequatur unde autem cum repellendus dolorum harum veritatis dolor et natus perferendis dolore culpa. Nostrum veritatis accusamus molestias porro sint veniam officia! Harum eaque corporis aperiam
      nobis ea vitae animi consectetur libero sed nisi repellendus voluptatum illum voluptate veniam quisquam ullam, assumenda rerum tempora et ducimus, quod nam officia. Velit, dolores molestiae error laudantium minus consectetur natus vero ducimus esse
      voluptatibus delectus nam dolore tempore expedita ad pariatur repellendus rerum fugiat recusandae unde iste omnis repellat. Vero eos ex dolorum explicabo eum placeat rem, unde nobis id veritatis molestias harum beatae enim, obcaecati sed, provident
      iusto error minus quis? Tenetur aliquid ipsa illo tempora odio ab. Doloremque laudantium, officia accusantium non autem blanditiis incidunt alias. Debitis at ullam esse nihil! Est, hic quasi! Voluptas rem mollitia dolorum accusamus ipsa non ipsam
      odit quis debitis quasi aliquid tempore vel totam porro possimus ullam inventore sunt, in accusantium, maiores natus. Magnam, aut quaerat alias beatae commodi eum autem repellat accusamus esse in corrupti amet maiores dolorem maxime exercitationem
      omnis totam natus adipisci suscipit. Rerum maiores, nobis eligendi repudiandae doloremque mollitia deserunt praesentium expedita, odio fugiat quae quas. Laboriosam eaque rem praesentium quam vero fugit debitis, odio sed ad. Doloribus quod saepe
      nisi earum sapiente tempore expedita modi perspiciatis cum aut vitae, consequatur, eveniet ducimus totam quis amet, quam beatae? Harum corrupti iure odio perferendis corporis totam eos id autem neque, aut vero at repudiandae soluta quibusdam dolor,
      laborum molestias! Excepturi necessitatibus, incidunt saepe id voluptatibus sapiente mollitia, similique nulla in earum dignissimos porro quis beatae, molestiae recusandae eveniet minus cupiditate tempora! Error quo eum qui fugit itaque accusantium
      non ullam saepe sunt incidunt quidem quaerat ea eius doloribus possimus totam, tenetur quis mollitia. Porro, cumque vero modi quo architecto ullam commodi aspernatur repudiandae ipsum sunt dolorem neque fugiat vitae a ex nihil vel tenetur laborum
      eligendi aut rem. Magnam quidem soluta vero amet expedita. Officiis, laborum eveniet. Nobis, reiciendis natus! Optio, delectus! Voluptates, unde aliquid fuga odio perferendis at nemo qui quidem velit ullam tempora accusantium, molestias voluptatibus
      ratione libero laudantium illo, aperiam dolorum earum exercitationem quae neque voluptate! Nihil explicabo sed sequi provident neque repellat quia quasi, doloremque tempore repellendus.</p>
  </div>
</body>

</html>