Making a Background Image Static or Stick

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-image: url(‘../images/background.jpg’);
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.

background-position: top center;

So, now you know how to make a website background stick and not move when the page is scrolled!

5 thoughts on “Making a Background Image Static or Stick

  1. Am sorry i don’t understand of where to put in these codes. Every “How to” make your page static didn’t help me at all, because i dont even know where to start. So can you please explain on how to do this at first so i can get the hang of it? Thank you…

  2. This code needs to be put in a CSS file of your website.

    If you prefer to use inline CSS right in the actual HTML file itself, you will put it in the section – like this:

    < style>
    body {
    background-image: url(‘../images/background.jpg’);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    }

Leave a Comment

*