How to Make Background Move with the Content

The last topic we must discuss regarding background is the background-attachment. It determines whether the background moves as the content scrolls.

The background-attachment property accepts two values, scroll or fixed.

When set to scroll, the background image moves with the content.
When set to fixed, the background image stays stationary when the content scrolls.

html

<div class="fixed">
  <!-- Make sure the paragraphs are long enough -->
  <p>. . .</p>
 
  <p>. . .</p>
 
  <p>. . .</p>
</div>
 
<div class="scroll">
  <!-- Make sure the paragraphs are long enough -->
  <p>. . .</p>
 
  <p>. . .</p>
 
  <p>. . .</p>
</div>

css

.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

The background shorthand

Lastly, background is a shorthand property for all background properties discussed. It has the following syntax:

css

p {
  background: <background_color>/<background_image> <background_repeat>
    <background_attachment> <background_position>;
}