반응이있는 배경 이미지

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; 
    } 

을 를 해결할 수 ?

감사합니다. 당신은 배경을 설정 한 클래스에

Answer 1

추가 배경 크기 :

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

Answer 2

파이어 버그 콘솔을 통해

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

추가는 반응 할 것 같았다.