CSS Fixed Position Background Image
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.
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame()
- this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![Create a Dynamic Table of Contents Using MooTools 1.2]()
You've probably noticed that I shy away from writing really long articles. Here are a few reasons why:
Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question.
I've noticed that I have a hard time...
![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...
Looks good David!
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.
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!
This is incorrect. Background-attachment:fixed should be used, not background-position:fixed
Yes, you are right. The correct is Background-attachment:fixed !
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; }
Absolutely wrong…. background-attachment will be used…
You are all wrong! example:
#div{background: #FFFF url(“/images/background.jpg”) repeat fixed;}
hahah..
This code keeps background still and stretched. It works! Try it!
Ive done it myself..
This should take care of all your background needs, even if the image is landscape instead of portrait.
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…
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%;
}
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;}
Hi david,
I used
It works really great, though your article is also informative.
Let me know is this works for all of you or not.
Thanks,
Rafi
Heyya @dhillon, your advice is 10000% works for me..! Great dude, many thanks! :D
Thanks Guy, short but very useful!
Heyya @dhillon, your advice is 10000% works for me..! Great dude, many thanks! :D
it keep stretch fixed ^_^
what is means top right or how it works ?
You are all wrong! example:
hahah..
I have some problems with my site. Could you guy please help me?
When I use
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!
In Internet Explorer 8 it doesn’t work really good :/
Not working in mobile
Yes doesn’t work in mobile
How can you make a fixed position background stop at a certain scroll percentage?