Изображение в полноэкранном режиме создает конфликт с нижним колонтитулом

Question

Итак, я пытаюсь сделать 2 вещи, которые хорошо работают сами по себе, но у меня возникают проблемы с их объединением. Во-первых, вот ссылка на сайт: http://ericbrockmanwebsites.com/dev4

Создать полноэкранное фоновое изображение с помощью

html { 
    min-height:100%; 
    background-size: cover; 
    background-image: url(images/bg.jpg); 
    background-repeat: no-repeat; 
    background-position: center bottom; 
} 

создать колонтитул, который остается в нижней части страницы, даже если нет никакого содержания, которое обычно потребует что-то вроде этого:

html { 
    height:100%; 
} 

body { 
    height:100%; 
} 

.container { 
    min-height:100%; 
} 

#footer { 
    clear:both; 
    position:relative; 
} 

проблема заключается в том, что для того, чтобы в сноске, чтобы остаться на дне высоту HTML/тело должно быть определено на 100%, но если я не определить их с помощью мин-высота значение, фоновое изображение просто cov когда экран загружается. Это означает, что если/когда есть необходимость прокрутки вниз, фоновое изображение переходит только туда, где нижняя часть экрана находилась под нагрузкой.

Я играл с этим несколько часов, но, похоже, не нашел решения. Мне что-то не хватает?

Answer 1

Во-первых, height и min-height не являются взаимоисключающими. Нет причин, по которым вы не можете использовать оба. Что касается прокрутки фона, когда страница больше, чем доступное пространство, вы пробовали background-attachment: fixed?