Размещение содержимого относительно фона с фоном-положением: обложка

Question

Я пытаюсь написать аккуратную небольшую целевую страницу для сайта. У меня есть отличный 1920х1080 образ, который имеет хорошее открытое пространство в середине, которая идеального для размещения контента в.

Я использую атрибут background-size: cover;, чтобы обеспечить мой фон масштабирует хорошо и никогда не появляется искажен, однако я У меня возникли проблемы с выяснением того, как выровнять содержимое страницы с фоном при изменении размера экрана из-за нечетной механики фонового размера: обложка.

Я взломал примерную страницу, чтобы продемонстрировать, что я имею в виду: http://umwh.at/test.html. Просмотренный в 1920x1080, контент более или менее идеально согласуется с фоновым изображением, но при его уменьшении он совсем не работает.

Итак, без дальнейших церемоний, мой вопрос: Можно ли достичь этого, используя чисто CSS?

(Боковое примечание: У меня есть решение, использующее javascript here (Warning, large image), но мне сказали, что это не тот путь, но я не смог найти другой способ).

Answer 1

body { 
    background: #EEE url('../img/test.png') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Referece: http://css-tricks.com/perfect-full-page-background-image/
Демо: http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php