Изменение размера фонового изображения всегда пропорционально масштабу с центральной точкой

Я хочу иметь возможность воспроизводить поведение изображения этого сайта при изменении размера.

Похоже, что фоновое изображение имеет центральную точку, где изображение начинает обрезаться, когда оно не может сохранить шкалу пропорций.

Вот пример:

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

Теперь мой фон имеет следующий css:

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

Проблема в том, что она исправлена, и я хочу, чтобы она обрезалась, когда изображение не может быть масштабировано.

Ответы

Ответ 1

Вы ищете эту комбинацию:

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

Рабочая скрипка здесь.

Обратите внимание, что это не поддерживается IE8 и для этого потребуется JS-хакер, если вам потребуется поддержка IE8 или старше.