Я пытаюсь сделать следующее ...

Имейте изображение, которое всегда будет горизонтально и вертикально центрировано на странице, независимо от размера экрана.Сохранить соотношение сторон при изменении размераЕсть текст, который всегда будет внизу области просмотра.

До сих пор я придумал две половины решения ...

Решение 1 -http://jsfiddle.net/5jphd/ - Это работает, но не поддерживает соотношение сторонРешение 2 -http://jsfiddle.net/FAzBq/ - Это не по центру.

Я ищу решение, которое сочетает в себе оба выше. Вот мой код, если вы можетеНажмите на ссылку выше ...

HTML

  
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
 

Scroll down

CSS

//Solution 1

html, body {height: 100%}

body {
    position: relative;
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
img {
  width: 70%;
  height: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.text {
    margin-top: -50px;
    text-align: center;     
}

// Solution 2 - same as above but with .wrap class

.wrap {
    overflow: hidden;
    position: relative;
    padding-top: 65%;
}

Любая помощь будет принята с благодарностью.