<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">
	<section class="bg-attachment img-1">
          <h2>Fixed</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptates ratione dignissimos, repudiandae a totam maxime ad hic harum placeat velit, illum fugiat repellendus dolore ab quisquam pariatur facilis aliquid sunt exercitationem maiores sint in eligendi id? Culpa provident aliquid architecto. Illo, cum ipsum ullam aliquam officia vel molestiae. Doloribus sunt inventore quisquam tempora, quis perspiciatis laborum minus nemo saepe veritatis, iure, libero quo nam optio similique sequi natus omnis. Harum quia eos tempora consequuntur dolores, hic cumque impedit quam natus, maxime, eligendi nulla quasi dolorum error in? Tempore quo earum recusandae eveniet voluptate officia nesciunt vitae, maiores voluptates qui vel delectus. Accusamus quam sunt consequatur. Nostrum aliquid maiores necessitatibus dolorum voluptates et ut dicta possimus, magni eveniet, sequi temporibus ex minus corrupti quisquam veniam dignissimos odio quam! Dolorem dolores, ad officiis qui pariatur iusto! Ab provident illo voluptatum dolore quae, consectetur exercitationem quisquam omnis dicta id quo tempora molestiae modi suscipit excepturi voluptas. Placeat eos impedit rerum tenetur reprehenderit repellendus, quam numquam adipisci sed iure incidunt minus nobis facilis labore fugit harum esse? Consequatur itaque culpa numquam porro maiores reiciendis repellat, quasi dolorum iusto ducimus laborum autem tenetur repudiandae, saepe harum nam accusantium? Voluptates voluptatem impedit quasi dignissimos libero!
	</section>
  	<section class="bg-attachment img-2">
          <h2>Scroll</h2>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt vel obcaecati numquam. Aliquam maxime veniam corporis quidem aut officia iste laboriosam culpa? Deleniti itaque voluptatibus, sit aliquam cumque est odit delectus ullam iure numquam saepe neque incidunt eveniet hic tempore error qui expedita odio debitis impedit, recusandae, modi sed? Harum architecto vitae inventore eius voluptatum cumque sequi quidem, aut, non animi doloribus sunt atque mollitia repellat rerum exercitationem quae deserunt temporibus quas iusto tenetur magnam quis possimus. Porro reiciendis esse velit voluptate repudiandae cumque, vero ut possimus dicta eum exercitationem necessitatibus veniam in odit? Ducimus animi reiciendis est aliquam, voluptatibus expedita, in quasi fugit rem corrupti, autem amet omnis tempore cumque architecto iure libero delectus ex qui dolorem labore ipsam suscipit dolor repudiandae. Repellendus consequuntur porro adipisci magnam magni amet ducimus, labore praesentium ipsum, enim unde asperiores! Assumenda hic itaque libero reiciendis beatae quod fugit, dolorum rerum iure laudantium minus ducimus alias eveniet commodi doloribus eos dolore neque sunt velit dicta nihil doloremque officia. Similique ipsum quo est soluta nobis. Deserunt quas accusantium eos nemo quae dolore doloremque odio possimus? Laboriosam ullam sapiente repellat nemo voluptas ipsam doloremque a, ducimus dolor molestiae harum ipsa error nostrum vitae molestias rerum officia.
	</section>
      	<section class="bg-attachment img-3">
          <h2>Local</h2>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt vel obcaecati numquam. Aliquam maxime veniam corporis quidem aut officia iste laboriosam culpa? Deleniti itaque voluptatibus, sit aliquam cumque est odit delectus ullam iure numquam saepe neque incidunt eveniet hic tempore error qui expedita odio debitis impedit, recusandae, modi sed? Harum architecto vitae inventore eius voluptatum cumque sequi quidem, aut, non animi doloribus sunt atque mollitia repellat rerum exercitationem quae deserunt temporibus quas iusto tenetur magnam quis possimus. Porro reiciendis esse velit voluptate repudiandae cumque, vero ut possimus dicta eum exercitationem necessitatibus veniam in odit? Ducimus animi reiciendis est aliquam, voluptatibus expedita, in quasi fugit rem corrupti, autem amet omnis tempore cumque architecto iure libero delectus ex qui dolorem labore ipsam suscipit dolor repudiandae. Repellendus consequuntur porro adipisci magnam magni amet ducimus, labore praesentium ipsum, enim unde asperiores! Assumenda hic itaque libero reiciendis beatae quod fugit, dolorum rerum iure laudantium minus ducimus alias eveniet commodi doloribus eos dolore neque sunt velit dicta nihil doloremque officia. Similique ipsum quo est soluta nobis. Deserunt quas accusantium eos nemo quae dolore doloremque odio possimus? Laboriosam ullam sapiente repellat nemo voluptas ipsam doloremque a, ducimus dolor molestiae harum ipsa error nostrum vitae molestias rerum officia.
	</section>
  </div>
</body>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: space-around;
}

.bg-attachment {
  padding: 50px;
  width: 400px;
  border: 1px solid black;
	background-image: url("https://images.pexels.com/photos/5514709/pexels-photo-5514709.jpeg");
	background-repeat: no-repeat;
  background-size: 300px;
  font-size: 20px;
}

.img-1 {
  background-position: 200px 200px;
  background-attachment: fixed;
}

.img-2 {
  background-position: center 250px;
  background-attachment: scroll;
}

.img-3 {
  background-position: center 250px;
  background-attachment: local;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.