How is twitter.com's scaling background image implemented? [closed]

Question

twitter.com has a nice implementation of a scaling background image.

How is this implemented? Is it using libraries/tools I could use myself?

What led me to look at this is that I'm looking for a solution which works well in older browsers and is simple to implement with light requirements.

Answer 1

I've create a fiddle for you that acts the same as the Twitter page.

Just to correct Talasan above, you need to remove from the code.

display:none;

Just to be more clear with your questions. Twitter doesn't use any libraries or tools to achieve this. What they are doing is setting an image with fixed position on the center of the screen. Why the image doesn't get resized while we resize the browser window? They use a high resolution image and they resize it to 200% width and height. This way the image will look the same on almost all resolutions and will only change on really small ones.

Example

Also just to clarify this, Twitter's background image doesn't scale. It will look the same regardless the resolution of your browser but because of the way they are using to do this, you are getting the delusion that it is actually scaling. See images below.

Actual Image Size

1920 x 1018

1024 x 600

320 x 480 ( iPhone )

Answer 2

I'm not sure why they'd do it like this, but they're using a fixed position on a div that contains an image:

.front-bg {
    background: #000000;
    height: 200%;
    left: -50%;
    position: fixed;
    width: 200%;
}

and then on the image, they're forcing it to 'fit':

.front-bg img {
    bottom: 0;
    display: none;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    right: 0;
    top: 0;
}

Though, you should probably just use the background-size property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size