Перемещение CSS-градиента в нескольких ящиках

Question

Вот ссылка на мою jsfiddle. http://jsfiddle.net/inthenameofmusik/ddto077m/5/

Градиент перезапускается снова и снова в каждой коробке или элементе. Я не уверен, что случилось с моим CSS. Любая помощь оценивается.

body { 
background: linear-gradient(#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* W3C */ 
} 

Я уверен, что это простое исправление, извините за CSS-новичок этого вопроса.

Answer 1

Вам нужно добавить html, body {height:100%;} к вашему стилю, чтобы заставить браузер отображать родительский тег html на полной высоте. В настоящее время он воспроизводит только около 100 пикселей в высоту, и фон тела повторяется.

См. Это update fiddle for example.