CSS Fixed Position Background Image

Discussion

1. Eric Wendelin

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

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

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

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

   You are all wrong! example:

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

   hahah..
9. efka

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

   body {
     background:url(yourImageURL.jpg) repeat fixed;
     background-size: 100%;
   
10. efka

    Ive done it myself..
11. Kryptonite Dove

    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;
    }
    
• Kamal

  I can’t attach any images from css, but if I put same code on html header section in style tag then work properly. but in css all code are work fine only have not work background-images attachment..but work background color.
  please fix my problem…
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. Md. Rafiul

    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. Cuanq Gigabyte

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

    Thanks Guy, short but very useful!
17. tim mua sim

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

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

    what is means top right or how it works ?
20. kungfu

    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. Antonio Sánchez

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

    Not working in mobile
• Man

  Yes doesn’t work in mobile
24. Scott Heliker

    How can you make a fixed position background stop at a certain scroll percentage?