[Помогите] Фон на главной на всю высоту экрана с анимацией

Сайт http://www.l-invest.ru/ На данном сайте на главной странице на любом разрешении фон всегда на всю высоту и ширину, помимо этого еще и с анимацией "вперед-назад". Как можно осуществить данную задачу?

 

у меня имеется блок <div class="fon1">содержимое</div>

и у него такие стили:

.fon1 {
background: url(../images/fon2.jpg) no-repeat 50%;
background-size: cover;
/* position: absolute; */
top: 85px; // отступ на меню в шапке
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
но что-то не работает должным образом :(

 

вот закинул в генератор https://jsfiddle.net/AlexGood2016/0ra6fqgL/3/ так удобнее всем посмотреть будет. Картинка тянется по ширине , все красиво, но по высоте не весь экран заполняет :(

 

доброго https://jsfiddle.net/0ra6fqgL/5/

 

честно говоря не совсем понял в чем разница? Нужно чтобы при загрузке страницы картинка занимала всю видимую область просмотра, а так снизу остается пикселей 50 где я текст внизу написал... либо часть картинки невидно и только скролом видишь когда прокручиваешь

 

можно указать для блока fon height: 100vh;

 

доброго вот пример можно подправить под ваши цели https://jsfiddle.net/gyggyhyt/ --------------- https://jsfiddle.net/gyggyhyt/1/

 

что-то меня аж укачало