CODEWITHSUNDEEP
javascripthtmlcss
meow
meow

Reputation: 28164

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?)

Upvotes: 0

Views: 414

Answers (5)

Hussein
Hussein

Reputation: 42808

One line is all you need 

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

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

Upvotes: 1

alex
alex

Reputation: 490143

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.

Upvotes: 1

Blender
Blender

Reputation: 298096

It's done with pure CSS:

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

Upvotes: 3

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 1

Shaz
Shaz

Reputation: 15867

CSS:

background-attachment: fixed;

My my.

Upvotes: 3

Related Questions