Как предотвратить градиент фона от начала всего?

Question

У меня есть простой веб-сайт с некоторыми статьями/картами на нем. В качестве фона я использую градиент.

body, html { 
    height:100%; 
    padding:10px 0 0 0; 
    margin:0; 
    background: #99b8cc; 
    background: linear-gradient(to top, #c8dae6 33%, #99b8cc 100%); 
    font-family:'Open Sans', sans-serif; 
    height: 1000px; 
    max-width: 1000px; 
    /*overflow-y: scroll;*/ 
} 

Все в порядке! При нажатии на карту она расширяется, что также увеличивает общую высоту страницы. Но затем, когда вы достигаете «первой 100% высоты», градиент фона начинается снова.

Как я могу предотвратить его от начинать сначала? Затем градиент должен всегда использовать «новую» 100% -ную высоту страницы.

jQuery используется на этой странице, если это помогает.

Answer 1

Ваш height сначала определяется как 100%, но после этого вы переопределяете его height: 1000px;, и это переопределяет первый.

Просто удалите height: 1000px;, чтобы решить эту проблему.

Возможно, вам необходимо это правило: min-height: 1000px; (вместо height: 1000px;) в зависимости от того, что вы пытаетесь сделать.

Answer 2

Попробуйте применение background-size: 800% 800%;. Вы можете настроить эти значения в зависимости от длины вашего контента.