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

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

View Demo

Comments

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


Be Heard!

Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!

Name*:
Email*:
Website: