Many web designers want to make a site that has a background that doesn’t move when the page is scrolled up or down. This is known as a ‘sticky background’. The idea is that you can create one large graphic – and then this graphic remains in the exact same place – no matter how long the page is. It is a good design tool to use in some instances.
How can you make a website background static or not move?
A little bit of CSS, of course!
These are the three main pieces you need. You need to set the background-image, background-repeat, and background-attachment CSS properties:
background-repeat: no-repeat;
background-attachment: fixed;
From there, you then need to set the location of the background attachment.
In this case, I want to make the background image centered (so that no matter how wide it is, it will always appear correctly on the site) and set it so it is attached to the “top” of the page. When attaching to the top, that means the very top of your graphic will appear at the top of the site. Then if the graphic is 1000 pixels tall and someone’s screen is only 900 pixels tall, the last 100 pixels of the image will be cut off. You can also use “bottom” if you’d prefer.
So, now you know how to make a website background stick and not move when the page is scrolled!