CSS Fixed Position Background Image
Written by David Walsh on March 7, 2008 · 12 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.
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!
body {
background:url(yourImageURL.jpg) repeat fixed;
background-size: 100%;
</style
Ive done it myself..
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;
}
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%;
}