Background Image Fixed while Scrolling the Page


Here we are going to create an HTML page where the background image of a div will be fixed while scrolling the page to the bottom of the page. This design concept is very good for responsive design and one page layout.

Here you can see the example of this type of layout and what we are going to achieve.

1. HTML Code

2. CSS Code ( style.css )

Here, we have added three div classes for top, middle and bottom banner as .top-banner, .middle-banner and .bottom-banner respectively.

Here, we are considering the css code snippet one of these three divs.

fixed is making the background image fixed while you scroll the page and background-size: cover is covering the whole page width.

Now, you know how to create a page with fixed background image while scrolling.

So happy designing 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.