title: Responsive background image
body: <p>I'm trying to make a full screen responsive slideshow with Orbit ( foundation 5 ). I have problem with the background image, it's still fixed .</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;ul class="example-orbit" data-orbit&gt;
    &lt;li class="slide slide1"&gt;&lt;/li&gt;
    &lt;li class="slide slide2"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  
  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&gt;* {
    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;
      }
  </code></pre>
  
  <p>How can i fix it ?</p>
  
  <p><a href="http://www.salmenbejaoui.com/test/" rel="nofollow">DEMO</a></p>
  
  <p>Thanks.</p>