Сохраняйте изображение Bg по центру экрана

Question

Я хочу, чтобы мое изображение bg центрировалось, независимо от того, достаточно ли велик монитор пользователя, чтобы уместить его целиком, или слишком мал, чтобы отобразить его все сразу. Аналогично, он должен оставаться по центру по горизонтали, когда пользователь увеличивает ctrl +. Вопрос лучше всего иллюстрируется изображениями. Вот увеличенный снимок, который является правильным поведением:

Вот увеличенный снимок, что не правильно. Фон показывает левое поле и обрезается на 100% с правой стороны. Он должен быть отрезан одинаково с левой и правой сторон:

Наконец, вот пример страницы, так что вы можете поэкспериментировать с увеличением и уменьшением самостоятельно:

http://pastehtml.com/view/b3qfjcghu.html

Спасибо!

Answer 1

Похоже, вы задаете контейнеру размер изображения, так что на самом деле оно никогда не является «центрированным», потому что оно всегда точно помещается.

Если вы используете это для #container:

width: 100%;

Тогда он будет использовать всю ширину экрана, так что фон будет отцентрирован в зависимости от размера экрана.

http://jsfiddle.net/pimvdb/AxzdP/

---

Или, как предположил Артфункель, вы можете просто использовать элемент body без контейнеров.

body {
    background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
    background-position: center 0%;
}

---

То, что вы также можете сделать, - это создать отдельный контейнер, подобный этому:

<div id="bgcontainer"></div>

с:

#bgcontainer {
    width: 100%;
    height: 1000px;
    background: url(http://i.imgur.com/7JUFb.jpg) no-repeat;
    background-position: center 0%;
    z-index: -999 /* keep on background so that other elements are above it */
}