How to set a static Background Image

If you look at this page, you notice that the background image does not move

http://livingsocial.com/deals开发者_运维知识库/31570-86-off-boot-camp-classes?msdc_id=13

1) How is this done?

2) Why doesn't Twitter do something similar (ie, what are the UI disadvantages?)

---

CSS:

background-attachment: fixed;

My my.

---

It's done with pure CSS:

body
{
  background-image: url('foo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

---

You can use:

body {
     background: #fff url(path/to/image.png) 0 0 no-repeat;
     background-attachment: fixed;
}

As to 'why doesn't Twitter do this?' That's not something we can answer, really, unless the Twitter devs are present on Stack Overflow. Historically using it has meant the page tends to scroll somewhat 'clunkily,' but that might just be the added rendering requirements placed on the browser, rather than implicit in the behaviour, or use, of background-attachment.

---

1) There is a large div there with the background, and position: fixed.

position: fixed means it won't move when the viewport scrolls.

2) I don't know... they probably would if they wanted the functionality.

---

One line is all you need

background:transparent url(img.jpg) no-repeat fixed 0 0;

Check working example at http://jsfiddle.net/dFJCt/