Treehouse

CSS Fixed Position Background Image

By on  

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-attachment:fixed; }

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

ydkjs-4.png

Recent Features

Incredible Demos

  • MooTools, Mario, and Portal

    I'm a big fan of video games. I don't get much time to play them but I'll put down the MacBook Pro long enough to get a few games in. One of my favorites is Portal. For those who don't know, what's...

  • Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

Discussion

  1. Looks good David!

  2. Lu

    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. Loughlin

    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

    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%;
    
  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

    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

    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;
    }
    
  19. what is means top right or how it works ?

  20. You are all wrong! example:

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

    hahah..

  21. Five-O

    I have some problems with my site. Could you guy please help me?

    When I use

    background-attachment:fixed;
    • Five-O

      to fix my image as background. It was just true when I ran it on Firefox. But when I use my cell phone to test (upload it on website), it was wrong. I mean it couldn’t fix, although I used “no-repeat”.

      I’ve tried many other ways but it still no change. I don’t know why.
      So please show me the right way.

      Thanks so much!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!