css - Resizing background-image always proportionally to scale with a center point

Question

I want to be able to reproduce the behavior of this website's image when resizing.

It seems like the background-image has a center point where the image start to crop when it cannot keep its proportion scale.

Here is an example:

http://themes.evgenyfireform.com/wp-jad/

For now my background has the following css:

#bg {
    position: fixed;
    top: 0;
    left: 0px;
    width:100%;
}

The problem is that it's fixed and I want it to crop when the image can't be scale.

Answer 1

You are looking for this combination:

background-position:50% 50%;  /* Sets reference point to scale from */
background-size:cover;        /* Sets background image to cover entire element */

Working sample fiddle here.

Note that this is not supported by IE8 and will require JS hackery there if you need IE8 or older to be supported.