Блог

У меня есть файл src img, который я использую в качестве фона. Используя этот css: (изображение 1920х1080)

 .bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    min-width: 1920px;
}
  

И это делает то, что я хочу для рабочего стола, соответственно увеличивает масштаб для более высокого разрешения, и когда я сжимаю окно, оно выполняет только часть того, что я хочу. Ширина по-прежнему сохраняется (что хорошо), но я хочу, чтобы ее нельзя было прокручивать в стороны, и я хочу, чтобы изображение было отцентрировано в новом разрешении.

Итак, вот изображение того, как это выглядит при изменении размера сейчас, где красная область соответствует текущему разрешению, а синяя область все еще прокручивается.

http://i.imgur.com/7VJfKPW.jpg

И вот изображение того, как я хочу, чтобы это выглядело, где черная область просто пуста, пользователь не может прокручивать в стороны, они могут прокручивать только вниз, если там есть содержимое, и прокручивать в сторону, только если там есть содержимое (за исключением самого изображения) и, конечно, изображение также центрировано в новом разрешении.

http://i.imgur.com/O3sLE31.png

У кого-нибудь есть идеи о том, как я могу этого добиться? Спасибо.’

РЕДАКТИРОВАТЬ: более подробные макеты

Итак, вот оно в разрешении рабочего стола: http://i.imgur.com/Z8x4e3I.jpg
Вот разрешение для мобильных устройств, где вы можете видеть, что вы можете прокручивать изображение до конца вправо:http://i.imgur.com/Y3bC2DI.png
И вот как я хочу, чтобы это было, где изображение было центрировано, и вы не могли прокручивать ни в одну из сторон, и все это должно по-прежнему позволять изображению увеличиваться в размерах, когда окно также больше 1920х1080:http://i.imgur.com/7d2vpRK.png

РЕДАКТИРОВАТЬ: tl; dr Я хочу, чтобы фоновое изображение всегда соответствовало размеру окна браузера, даже если у пользователя монитор 4k, или 1080p, или мобильный телефон, но когда нам приходится уменьшать изображение, страницу нельзя прокручивать в стороны. И изображение обычно будет 1080p.

элемент background-size позаботится об этом

Просто используйте

 background-size: cover;
  

обновлен jsfiddle: http://jsfiddle.net/Uz5AY/4 /.

 * {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(http://placehold.it/1900x1080);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

#container > .content {
    width: 70%;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0.7);
}

#container > .content > p   p {
    margin-top: 20px;
}