How is twitter.com scalable background image implemented?

Question

twitter.com has a good implementation of a scalable background image.

How is this implemented? Is this using libraries / tools that I could use on my own?

What prompted me to take a look at this was that I was looking for a solution that works well in older browsers and is easy to implement with easy requirements.

Answer 1

I am creating a fiddle for you that acts just like a Twitter page.

To fix Talasan above, you need to remove from the code.

display:none; 

Just to be more clear with your questions. Twitter does not use any libraries or tools to achieve this. What they do is set the image to a fixed position in the center of the screen. Why does the image not change when the browser window is resized? They use a high resolution image and resize it to 200% of its width and height. Thus, the image will look the same at almost all resolutions and will change only at very small.

Example

Also, to clarify this, the Twitter background image does not scale. It will look the same regardless of the resolution of your browser, but because of how they are used for this, you get the illusion that it really scales. See Images below.

Actual Image Size

1920 x 1018

1024 x 600

320 x 480 (iPhone)

Answer 2

I'm not sure why they will do this, but they use the fixed position in the div that contains the image:

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

and then on the image, they make it “match”:

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

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