Фоновая прокрутка вложения против фиксированной

Question

У меня есть изображение для фона, ширина которого составляет 2000 пикселей.Он подготовлен следующим образом: 1000 пикселей в центре для контента и дополнительные 500 пикселей слева и справа для полей в мониторах с более высоким разрешением.

Я бы хотел, чтобы он был центрирован для каждого разрешения.

Когда я пытаюсь сделать это с bg {background:url(bg.jpg) no-repeat center top fixed; }, изображение правильно отцентрировано, но оно явно не прокручивается.

Поэтому я заменяю fixed на scroll: bg {background:url(bg.jpg) no-repeat center top scroll; }, но затем изображениене центрируется - он начинает отображаться в верхнем левом углу, так что в меньших разрешениях вы можете видеть левое поле, которое не должно быть видимым.

Вот пример на jsfiddle.net ,Поиграйте с background-attachment значениями scroll / fixed и попытайтесь уменьшить размер окна результатов, и вы, я надеюсь, поймете, что я имею в виду.

Можете ли вы помочь мне решить эту проблему?

Answer 1

Используйте медиа-запросы.Как то так.

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

#left-margin-div {
width:500px;
height:1700px; /*or whatever your height is*/
background-image:url('yourimage.jpg');
position:absolute;
left:-500px;
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

Answer 2

Попробуйте использовать свойство background-attachment, как показано ниже

background-attachment:scroll;