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

Question

Я хотел бы сохранить изображение фиксированным в качестве фона, пока я прокручиваю над ним прозрачную коробку. Однако, когда я пытаюсь сделать это на экране с соотношением сторон 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

Любая помощь будет оценена.

Answer 1

Установить фон на 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;   
} 

Updated Example

Answer 2

Это звучит скорее как проблема с вашим background-size, не сохраняя его.

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

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