Адаптивное фоновое изображение

Я пытаюсь сделать полноэкранное слайд-шоу с помощью Orbit (основа 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;
    }

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

ДЕМО

Спасибо.


css zurb-foundation orbit
person Salmen Bejaoui    schedule 29.01.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

.slide1, .slide2 {
background-size:100%;
}
person Andrew    schedule 29.01.2014

arrow_upward
0
arrow_downward

Добавление

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

через консоль firebug, похоже, он стал реагировать.

person Will    schedule 29.01.2014