Как сохранить фоновое изображение изображения неподвижным?

Я хотел бы сохранить изображение фиксированным в качестве фона, пока я прокручиваю полупрозрачное поле над ним. Однако, когда я пытаюсь сделать это на экране с соотношением сторон 4:3, изображение просто разрезается пополам.

Вот мой CSS:

.content {
    background-color: black;
    background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;        
}

Вот пример того, что я хотел бы сделать:

http://s.codepen.io/shardros/debug/vOVWwp

Любая помощь приветствуется.


html css background background-image
person Edwin Shepherd    schedule 26.07.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Установите фон для тега body вместо .content, это сработает.

body {
    background-color: black;
    background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;        
}

Обновленный пример

person Stickers    schedule 28.07.2015

arrow_upward
0
arrow_downward

Это больше похоже на проблему с вашим background-size, он не держится на месте.

Попробуйте background-size: contain вместо cover.

Различия здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

person Jared    schedule 27.07.2015