Отзывчивое фоновое изображение

Question

Я пытаюсь сделать полноэкранное отзывчивое слайд-шоу с орбитой (фундамент 5). У меня проблема с фоновым изображением, оно все еще исправлено.

Мой код:

<ul class="example-orbit" data-orbit> 
    <li class="slide slide1"></li> 
    <li class="slide slide2"></li> 
</ul> 




html,body { 
    width: 100%; 
    height: 100%; 
} 
ul , li { 
    margin: 0; 
    padding: 0; 
} 
.orbit-container { 
    width: 100%; 
    height: 100%; 
} 

.orbit-container ul,.orbit-container .orbit-slides-container>* { 
    height: 100%; 
} 

.slide { 
    max-width: 100%; 
    max-height: 100%; 
    width: 100%; 
    height: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-position: center center; 
} 
    .slide1 { 
     background: url('image-url') no-repeat; 
} 

     .slide2 { 
      background: url('image-url') no-repeat; 
    } 

Как я могу это исправить?

DEMO

Спасибо.

Answer 1

добавить фон-размер в классе, где вы установили фоны:

.slide1, .slide2 { 
background-size:100%; 
} 

Answer 2

Добавление

.orbit-container .slide { 
    background-size: contain; 
} 

с помощью консоли Firebug, казалось, сделать его отзывчивым.