<div class="fixed">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti iusto ducimus inventore, enim
    veritatis reprehenderit nisi a explicabo accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime
    soluta ullam id consequatur voluptas voluptates! Ipsa non, eius similique voluptatem fugiat quasi sed sint
    ratione doloremque eaque ipsum reprehenderit esse nostrum tenetur doloribus sit labore. Dolorem quam, corporis
    perspiciatis labore eum eius quasi eveniet quia qui necessitatibus distinctio quaerat atque minus mollitia sunt
    eaque consectetur tenetur earum exercitationem animi sint, voluptatibus vero. Sint atque quas provident officia
    obcaecati aspernatur quasi architecto dolorem nemo quo hic, repellendus at autem consequuntur laborum ipsum
    distinctio temporibus totam neque nam ipsa nihil corrupti. Minus at ipsum vel facere dignissimos ullam vero iste
    nulla impedit, odit debitis distinctio nesciunt! Non, saepe! Beatae itaque iste quia saepe unde at! Voluptas
    sapiente excepturi laudantium ducimus consectetur earum repudiandae molestias, eligendi aspernatur eveniet
    debitis esse labore distinctio velit expedita temporibus eaque, quis fuga, unde atque. Vero deleniti quaerat
    omnis ea soluta aspernatur repellendus consectetur asperiores? Corporis provident perspiciatis debitis iusto
    asperiores laborum neque corrupti deserunt eaque cumque obcaecati unde voluptatibus accusantium officia, ab
    ratione, optio molestiae sequi facilis enim! Animi dolores impedit quasi deserunt natus laborum atque dolorum.
  </p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti iusto ducimus inventore, enim
    veritatis reprehenderit nisi a explicabo accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime
    soluta ullam id consequatur voluptas voluptates! Ipsa non, eius similique voluptatem fugiat quasi sed sint
    ratione doloremque eaque ipsum reprehenderit esse nostrum tenetur doloribus sit labore. Dolorem quam, corporis
    perspiciatis labore eum eius quasi eveniet quia qui necessitatibus distinctio quaerat atque minus mollitia sunt
    eaque consectetur tenetur earum exercitationem animi sint, voluptatibus vero. Sint atque quas provident officia
    obcaecati aspernatur quasi architecto dolorem nemo quo hic, repellendus at autem consequuntur laborum ipsum
    distinctio temporibus totam neque nam ipsa nihil corrupti. Minus at ipsum vel facere dignissimos ullam vero iste
    nulla impedit, odit debitis distinctio nesciunt! Non, saepe! Beatae itaque iste quia saepe unde at! Voluptas
    sapiente excepturi laudantium ducimus consectetur earum repudiandae molestias, eligendi aspernatur eveniet
    debitis esse labore distinctio velit expedita temporibus eaque, quis fuga, unde atque. Vero deleniti quaerat
    omnis ea soluta aspernatur repellendus consectetur asperiores? Corporis provident perspiciatis debitis iusto
    asperiores laborum neque corrupti deserunt eaque cumque obcaecati unde voluptatibus accusantium officia, ab
    ratione, optio molestiae sequi facilis enim! Animi dolores impedit quasi deserunt natus laborum atque dolorum.
  </p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti iusto ducimus inventore, enim
    veritatis reprehenderit nisi a explicabo accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime
    soluta ullam id consequatur voluptas voluptates! Ipsa non, eius similique voluptatem fugiat quasi sed sint
    ratione doloremque eaque ipsum reprehenderit esse nostrum tenetur doloribus sit labore. Dolorem quam, corporis
    perspiciatis labore eum eius quasi eveniet quia qui necessitatibus distinctio quaerat atque minus mollitia sunt
    eaque consectetur tenetur earum exercitationem animi sint, voluptatibus vero. Sint atque quas provident officia
    obcaecati aspernatur quasi architecto dolorem nemo quo hic, repellendus at autem consequuntur laborum ipsum
    distinctio temporibus totam neque nam ipsa nihil corrupti. Minus at ipsum vel facere dignissimos ullam vero iste
    nulla impedit, odit debitis distinctio nesciunt! Non, saepe! Beatae itaque iste quia saepe unde at! Voluptas
    sapiente excepturi laudantium ducimus consectetur earum repudiandae molestias, eligendi aspernatur eveniet
    debitis esse labore distinctio velit expedita temporibus eaque, quis fuga, unde atque. Vero deleniti quaerat
    omnis ea soluta aspernatur repellendus consectetur asperiores? Corporis provident perspiciatis debitis iusto
    asperiores laborum neque corrupti deserunt eaque cumque obcaecati unde voluptatibus accusantium officia, ab
    ratione, optio molestiae sequi facilis enim! Animi dolores impedit quasi deserunt natus laborum atque dolorum.
  </p>
</div>

<div class="scroll">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti iusto ducimus inventore, enim
    veritatis reprehenderit nisi a explicabo accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime
    soluta ullam id consequatur voluptas voluptates! Ipsa non, eius similique voluptatem fugiat quasi sed sint
    ratione doloremque eaque ipsum reprehenderit esse nostrum tenetur doloribus sit labore. Dolorem quam, corporis
    perspiciatis labore eum eius quasi eveniet quia qui necessitatibus distinctio quaerat atque minus mollitia sunt
    eaque consectetur tenetur earum exercitationem animi sint, voluptatibus vero. Sint atque quas provident officia
    obcaecati aspernatur quasi architecto dolorem nemo quo hic, repellendus at autem consequuntur laborum ipsum
    distinctio temporibus totam neque nam ipsa nihil corrupti. Minus at ipsum vel facere dignissimos ullam vero iste
    nulla impedit, odit debitis distinctio nesciunt! Non, saepe! Beatae itaque iste quia saepe unde at! Voluptas
    sapiente excepturi laudantium ducimus consectetur earum repudiandae molestias, eligendi aspernatur eveniet
    debitis esse labore distinctio velit expedita temporibus eaque, quis fuga, unde atque. Vero deleniti quaerat
    omnis ea soluta aspernatur repellendus consectetur asperiores? Corporis provident perspiciatis debitis iusto
    asperiores laborum neque corrupti deserunt eaque cumque obcaecati unde voluptatibus accusantium officia, ab
    ratione, optio molestiae sequi facilis enim! Animi dolores impedit quasi deserunt natus laborum atque dolorum.
  </p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti iusto ducimus inventore, enim
    veritatis reprehenderit nisi a explicabo accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime
    soluta ullam id consequatur voluptas voluptates! Ipsa non, eius similique voluptatem fugiat quasi sed sint
    ratione doloremque eaque ipsum reprehenderit esse nostrum tenetur doloribus sit labore. Dolorem quam, corporis
    perspiciatis labore eum eius quasi eveniet quia qui necessitatibus distinctio quaerat atque minus mollitia sunt
    eaque consectetur tenetur earum exercitationem animi sint, voluptatibus vero. Sint atque quas provident officia
    obcaecati aspernatur quasi architecto dolorem nemo quo hic, repellendus at autem consequuntur laborum ipsum
    distinctio temporibus totam neque nam ipsa nihil corrupti. Minus at ipsum vel facere dignissimos ullam vero iste
    nulla impedit, odit debitis distinctio nesciunt! Non, saepe! Beatae itaque iste quia saepe unde at! Voluptas
    sapiente excepturi laudantium ducimus consectetur earum repudiandae molestias, eligendi aspernatur eveniet
    debitis esse labore distinctio velit expedita temporibus eaque, quis fuga, unde atque. Vero deleniti quaerat
    omnis ea soluta aspernatur repellendus consectetur asperiores? Corporis provident perspiciatis debitis iusto
    asperiores laborum neque corrupti deserunt eaque cumque obcaecati unde voluptatibus accusantium officia, ab
    ratione, optio molestiae sequi facilis enim! Animi dolores impedit quasi deserunt natus laborum atque dolorum.
  </p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti iusto ducimus inventore, enim
    veritatis reprehenderit nisi a explicabo accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime
    soluta ullam id consequatur voluptas voluptates! Ipsa non, eius similique voluptatem fugiat quasi sed sint
    ratione doloremque eaque ipsum reprehenderit esse nostrum tenetur doloribus sit labore. Dolorem quam, corporis
    perspiciatis labore eum eius quasi eveniet quia qui necessitatibus distinctio quaerat atque minus mollitia sunt
    eaque consectetur tenetur earum exercitationem animi sint, voluptatibus vero. Sint atque quas provident officia
    obcaecati aspernatur quasi architecto dolorem nemo quo hic, repellendus at autem consequuntur laborum ipsum
    distinctio temporibus totam neque nam ipsa nihil corrupti. Minus at ipsum vel facere dignissimos ullam vero iste
    nulla impedit, odit debitis distinctio nesciunt! Non, saepe! Beatae itaque iste quia saepe unde at! Voluptas
    sapiente excepturi laudantium ducimus consectetur earum repudiandae molestias, eligendi aspernatur eveniet
    debitis esse labore distinctio velit expedita temporibus eaque, quis fuga, unde atque. Vero deleniti quaerat
    omnis ea soluta aspernatur repellendus consectetur asperiores? Corporis provident perspiciatis debitis iusto
    asperiores laborum neque corrupti deserunt eaque cumque obcaecati unde voluptatibus accusantium officia, ab
    ratione, optio molestiae sequi facilis enim! Animi dolores impedit quasi deserunt natus laborum atque dolorum.
  </p>
</div>
.fixed {
  background-image: url(https://images.unsplash.com/photo-1706582748265-de941eeacfe6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgxNDc2MTV8&ixlib=rb-4.0.3&q=85);
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.scroll {
  background-image: url(https://images.unsplash.com/photo-1706582748265-de941eeacfe6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgxNDc2MTV8&ixlib=rb-4.0.3&q=85);
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.