Why Is Changing The Background-attatchment From Scroll To Fixed Changing The Width Of This Background-image?

When I change background-attatchment from scroll to fixed it actually changes the dimensions (at least the width) of the background image. Why is this?

Solution 1:

From the specification:

If background images are specified, this property specifies whether they are fixed with regard to the viewport (fixed) or scroll along with the element (scroll) or its contents (local). The property’s value is given as a comma-separated list of <attachment> keywords where

So the reference for contain will not more be the element but the viewport when using fixed

To avoid this effect don't use contain but consider auto 500px since you know the dimension of your div:

#background-image {
  height: 500px;
  width: 500px;
  background-image: url(https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1407523604l/15136531.jpg);
  background-repeat: no-repeat;
  background-size: auto 500px;
  background-attachment: fixed;
}

<divid="background-image"></div><div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, harum molestias quia tempore doloribus enim rem eius facere inventore sit nostrum totam assumenda, impedit laudantium fugit? Ratione dignissimos dolor sed. Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Quisquam iusto mollitia facere, voluptate enim natus. Dolorem accusantium cum voluptatibus quasi minima, laborum enim quisquam maiores iusto esse dolor beatae quam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores
  optio voluptate ipsam maiores corrupti, quidem aut ex enim est deleniti! Rerum laboriosam earum, voluptas possimus animi quae et quis asperiores. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque nobis nesciunt eos fugiat voluptatem natus
  repudiandae iusto numquam optio, laudantium quia maxime perferendis soluta eligendi fugit esse totam voluptatum hic! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque a, quo cumque nemo velit quidem eveniet? Quae, iusto iste, neque aperiam
  ut architecto hic rerum necessitatibus recusandae quisquam quo temporibus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est perferendis ea nostrum necessitatibus explicabo culpa ipsa fuga natus maxime tempora ex blanditiis harum accusamus
  qui corporis ullam ducimus, dolorum quae? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis fugit ipsa natus architecto, officia atque ex. Quia, minus illum vitae omnis, incidunt accusamus explicabo voluptatum repudiandae eaque maxime
  reprehenderit qui. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure blanditiis ipsam at excepturi assumenda laborum quibusdam tempora quam perferendis ratione, sunt voluptate ducimus, velit distinctio. Hic eaque deleniti quisquam quod.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum eos eaque cum, consequatur assumenda quam error dolor molestiae labore ex itaque delectus officia animi eius, odio harum, hic voluptatibus ut! Lorem ipsum dolor sit amet consectetur adipisicing
  elit. Sint voluptas, aperiam excepturi ratione libero, placeat est, saepe quas labore fugit enim architecto voluptatem maxime facere sunt impedit repellat maiores exercitationem? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto placeat,
  assumenda nulla harum quia officiis ullam facilis eaque dolore magni modi, fugiat quis! Ipsum, facere incidunt voluptates laboriosam id quidem? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam eum laboriosam sint animi nisi minima placeat
  in recusandae amet et iste, asperiores ipsa hic, culpa unde, fugiat voluptatibus! Quos, omnis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos beatae tenetur dolores ad temporibus laboriosam repellendus dolorum corporis praesentium
  quos, possimus obcaecati fugiat reiciendis similique fuga est. Blanditiis, in pariatur. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam est temporibus eos beatae. Atque eum tenetur voluptas totam, vero voluptatem in dolorem dolore
  velit maxime, enim laudantium. Est, facilis corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum debitis est similique quis. Cumque iusto repudiandae velit ea repellat dolore sunt expedita ut voluptatibus culpa quam totam vitae,
  ducimus modi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis magni iure numquam sit! Nostrum quia, nemo neque deserunt, ex modi saepe optio ea illo debitis nesciunt officia consequuntur eum repudiandae! Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Sint adipisci animi minima, porro totam consectetur, ad labore consequatur aspernatur quod, ex tempore aperiam non. Ullam odit dolorem tempore doloremque est. Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, eligendi?
  Ea, ab maiores quia error nam esse totam perspiciatis aperiam illo nesciunt voluptates autem at. Ducimus suscipit voluptates libero voluptatibus! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque praesentium laboriosam, ratione, voluptatum
  error inventore ducimus illo dolorum sed delectus nam dolore est minima velit! Quae praesentium doloremque cumque explicabo. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam dicta autem numquam obcaecati? Dolores impedit repellat
  tempora quas voluptatem aspernatur blanditiis est, eum laborum, aut dolorem, odit magnam inventore corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem iusto officia a soluta explicabo quo officiis quos sunt beatae modi.
  Sunt, maxime ex tenetur adipisci laudantium iure velit ea corrupti! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt quia deleniti, ipsa excepturi reiciendis reprehenderit at odit inventore, earum perferendis aspernatur, soluta dicta
  voluptatibus provident tempore saepe animi ratione assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, necessitatibus! Explicabo sit culpa perspiciatis id esse quod placeat! Dolore aperiam molestias esse excepturi, voluptate
  provident neque. A porro minus libero?</div>