EN
CSS - disable background image scrolling
3
points
In this article, we would like to show you how to disable background image scrolling working with CSS.
Quick solution:
.element {
background-image: url('/path/to/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>