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-1.png

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • 5 More HTML5 APIs You Didnât Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

  • Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

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!

  22. In Internet Explorer 8 it doesn’t work really good :/

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