Html CSS Прокрутка фона Весь экран

Question

Мне нужна помощь в этом проекте для этого сайта ...

Si У меня есть все, что угодно. Но мне нужен мой прокручиваемый фон, чтобы вертикально растянуть по всему экрану не только верх.

Вот сайт размещен на внешнем сервере, пока я не получаю эту проблему фиксированной, так что я могу перенести его на мой реальный сервер ...

http://jacksonmilburn.bitballoon.com

Проблема заключается в том, что если вы увеличите все, что он путь вы можете видеть белый снизу.

Вот мой CSS код:

.sliding-background { 
background: url("images/bg.jpg") repeat-x; 
height: 1080px; 
width: 27162px; 
animation: slide 60s linear infinite; 
} 

@keyframes slide{ 
0%{ 
    transform: translate3d(0, 0, 0); 
} 
100%{ 
transform: translate3d(-9054px, 0, 0); 

Вот мой HTML код:

<div 

class="sliding-background" 
></div> 

Answer 1

Проблема заключается в том, что вы используете ширину и высоту, как пиксели изменить их в:

width: 100%; 
height: 100%; 

Это сделает изображение большим и сделает его отзывчивым к окну вашего браузера si зе также попробовать этот код, чтобы сделать ваше изображение полного фона:

.sliding-background { 
    background: url("images/bg.jpg") repeat-x; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 2

Как @Sora упоминалось ваш DIV должен заполнить высоту своего родителя.

Используйте этот стиль:

.sliding-background { 
    position: absolute; /*Usually height: 100% does not work if your div is not absolute or fixed.*/ 
    height: 100% !important; /*Stretch the height of the element*/ 
    width: 10000%; /* Really lengthy width */ 

    /*Your style*/ 

    /*background-size: cover;*/ /*Just stretching the element's height is not sufficient - So you have to tell the browser to scale the background of the div to cover the all visible area (by stretching proportionately)*/ 
    background-size: contain; /* This tries to fit the image in the div area - since the div's width is too great. It always fills vertically. */ 
} 

И я хотел бы предложить вам заменить ширину с процентом тоже.

ОБНОВЛЕНИЕ:

И этот способ предпочтительно лучше,

.sliding-background { 
    position: absolute; 
    height: 100%; 
    width: 100%; 

    /*Your style*/ 

    background-size: auto 100%; /* Make sure you call background-size after the background. */ 
} 

И анимировать background-position-x вместо transform:translate(x, y);

т.е.

@keyframes slide{ 
    0%{ 
     background-position-x: 0px; 
    } 
    100%{ 
     background-position-x: -9054px; /* or something */ 
    } 
} 

Примечание: Вы видите, что в первой реализации страница горизонтально прокручивается. Я предлагаю вам выбрать вторую реализацию.

Надеюсь, это поможет.