How to Keep the Background Image Fixed While Scrolling in CSS?

When you add a background image to an HTML element, by default, the background image scrolls along with the rest of the content of the element as the user scrolls through the page. This is the default behavior of the CSS background-image property.

In most situations, we don’t want the background image to scroll along with the element’s content, instead, we want to keep the background image fixed and the content scrollable.

In CSS, if you want to keep the background image fixed while the user scrolls through the page, you can set the background-attachment property to fixed. This will ensure that the background image remains in a fixed position while the rest of the content of the element scrolls over it.

For example, if you want to keep the background image fixed for the <body> element, you can use the following CSS code:

body {
    background-image: url(images/bridge.jpg); /* Your image url */
    background-attachment: fixed;  /* Make background img fixed */
    background-repeat: no-repeat;  /* Don't repeat the img */
    background-size: cover; /* Cover the entire screen */
    background-position: center; /* Pull img to center */
}

Output:

Here is a sample output of the above code:

Keep the background image fixed in CSS

As you can see from the above output, the background image is not scrolling along with the content of the body. This is exactly what we wanted to achieve.


Method 2: Using the Position Property

The background-attachment property is supported by most modern browsers, however, there are some mobile browsers that still do not support it. In such cases, the background image starts scrolling with the rest of the content.

To fix that problem we can use the position property in combination with the top, left, bottom and right properties and make the background image fixed.

The position property in CSS is used to set the position of an element on the layout. It is generally used with the top, bottom, left and right properties to specify where the element sits on the screen.

To make the background image fixed we need to set the position property to fixed and also the top, bottom, left and right properties to 0 so that the background image covers the whole element.

However, you can not directly apply position: fixed; on the element, as it will also make the content of the element fixed along with the background image. To avoid that we can use the ::before or ::after pseudo selectors to make only the background image fixed.

The following CSS code makes the background image fixed for the <body> element:

body {
    position: relative;  
}

body::after{
    content: "";
    background-image: url(images/bridge.jpg); /* Your image url */
    background-repeat: no-repeat;  /* Don't repeat the img */
    background-size: cover; /* Cover the entire screen */
    background-position: center; /* Pull img to center */
    position: fixed;  /* Fix the img */
    left: 0;
    top: 0;
    bottom: 0;
    right:0;
    z-index: -1;
}

Output:

Here is a sample output of the above code:

Make background image fixed in css using position property

In place of the ::after, you can also use the ::before pseudo selector. This will also give you the same result.

The position of the element on which you have applied the background image must be set to relative as we did in the above example. This ensures that the pseudo-element(::before or ::after) will be positioned relative to its parent element i.e. the element on which the background image is applied.


Conclusion

In this article, we learned how we can make the background image fixed while scrolling the content of an element.

In summary, if you want to make a background image fixed while scrolling, you need to set the background-attachment property to fixed. This ensures that the background image will remain fixed and will not scroll along with the element’s content.

Another approach could be to use the ::before or ::after pseudo selectors and apply the position: fixed; to make the background image fixed. You can use this approach if the background-attachment: fixed; is not working for you.

Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts