CSS Fixed Position Background Image

Written by David Walsh on March 7, 2008 · 18 Comments

Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by not moving.

The CSS

Place the background declaration of the element of your choice.

body	{ background:url(your-image.jpg) top right no-repeat; background-position:fixed; }

background-position: fixed keeps the background image in place so long as the element is tall enough for scrolling.

Comments

  1. Looks good David!

  2. I believe if you attach a file through the background-image property, you should use the background-attachment:fixed property for it to work properly.

  3. wasn’t able to get the background-position to work until I saw this comment. I’m using DW CS5.5 and so using Background-attachment worked great for me. Thanks!

  4. This is incorrect. Background-attachment:fixed should be used, not background-position:fixed

  5. Yes, you are right. The correct is Background-attachment:fixed !

  6. And since you already use a shorthand syntax, it could be as simple as : body { background:url(your-image.jpg) no-repeat fixed right top; }

  7. Nilanko Halder July 23, 2012

    Absolutely wrong…. background-attachment will be used…

  8. You are all wrong! example:

    #div{background: #FFFF url(“/images/background.jpg”) repeat fixed;}

    hahah..

  9. This code keeps background still and stretched. It works! Try it!

    body {
    background:url(yourImageURL.jpg) repeat fixed;
    background-size: 100%;
    </style

  10. Ive done it myself..

  11. This should take care of all your background needs, even if the image is landscape instead of portrait.

    body {
    background: url(./images/vintage_bg.jpg) no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
    }

  12. dhillon April 5, 2013

    i tried my other things but this one works 100%

    body
    {
    background:url(your image.jpg) top center no-repeat;
    background-attachment:fixed;
    background-size:100% 100%;

    }

  13. Learner May 23, 2013

    I want to fix an image on a background image
    here is my coding but its not working.. please help

    body
    {
    background-image:url(‘yawn.jpg’);
    background-repeat:no-repeat;

    background-image:url(‘batman.jpg’);
    background-repeat:no-repeat;
    background-position:top right;
    background-attachment:fixed;}

  14. Hi david,

    I used

    background: url(../images/banner1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    It works really great, though your article is also informative.
    Let me know is this works for all of you or not.

    Thanks,
    Rafi

  15. Heyya @dhillon, your advice is 10000% works for me..! Great dude, many thanks! :D

  16. Thanks Guy, short but very useful!

  17. Heyya @dhillon, your advice is 10000% works for me..! Great dude, many thanks! :D

  18. it keep stretch fixed ^_^

    html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
MySQL's REPLACE() Is PHP's STR_REPLACE()
Newer
Weekend Links - Firefox 3 Performance, Internet Explorer 8 JavaScript, Google / Microsoft Buying Digg, Social Bookmarking Icons, Referrer Spam