Languages
[Edit]
EN

CSS - disable background image scrolling

0 points
Created by:
Walter
286

In this article, we would like to show you how to disable background image scrolling working with CSS.

Quick solution:

body {
  background-image: url(example-image.png);
  background-repeat: no-repeat;
  background-attachment: fixed;  /*   <----- required   */
}

 

Practical example

In this example, we disable the background-image scrolling by making it fixed using background-attachment property. Now the image will not scroll with the page, it will stick to the top.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      height: 300px;
      background-image: url(https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png);
      background-repeat: no-repeat;
      background-attachment: fixed;  /*   <--- required   */
    }

  </style>
</head>
<body>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
  <p>Scroll down to see the background-image attachment</p>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join