The background shorthand

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>;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th class="highlight">Occupation</th>
      <th>Country</th>
      <th>Email</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td class="highlight">Software Engineer</td>
      <td>USA</td>
      <td>john.doe@example.com</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>28</td>
      <td class="highlight">Data Scientist</td>
      <td>Canada</td>
      <td>jane.smith@example.com</td>
    </tr>
    <tr>
      <td>Michael Johnson</td>
      <td>35</td>
      <td class="highlight">Project Manager</td>
      <td>Australia</td>
      <td>michael.johnson@example.com</td>
    </tr>
    <tr>
      <td>Emily Brown</td>
      <td>32</td>
      <td class="highlight">Marketing Manager</td>
      <td>UK</td>
      <td>emily.brown@example.com</td>
    </tr>
    <tr>
      <td>David Lee</td>
      <td>45</td>
      <td class="highlight">Senior Software Developer</td>
      <td>South Korea</td>
      <td>david.lee@example.com</td>
    </tr>
  </table>
</body>

</html>

Open Sandbox

Loading course content...

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>;
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> <th class="highlight">Occupation</th> <th>Country</th> <th>Email</th> </tr> <tr> <td>John Doe</td> <td>30</td> <td class="highlight">Software Engineer</td> <td>USA</td> <td>john.doe@example.com</td> </tr> <tr> <td>Jane Smith</td> <td>28</td> <td class="highlight">Data Scientist</td> <td>Canada</td> <td>jane.smith@example.com</td> </tr> <tr> <td>Michael Johnson</td> <td>35</td> <td class="highlight">Project Manager</td> <td>Australia</td> <td>michael.johnson@example.com</td> </tr> <tr> <td>Emily Brown</td> <td>32</td> <td class="highlight">Marketing Manager</td> <td>UK</td> <td>emily.brown@example.com</td> </tr> <tr> <td>David Lee</td> <td>45</td> <td class="highlight">Senior Software Developer</td> <td>South Korea</td> <td>david.lee@example.com</td> </tr> </table> </body> </html>