title: How do I put a background image behind my slideshow? (Will look like a picture frame)
body: <p>I built a slider with some help from here. Now I would like to add an iPad frame around my images. So it will look like the frames are sliding out of the iPad. But the iPad frame should not move, therefore its a background. I tried adding a background-image and its not showing up. </p>
  
  <p>Its all CSS &amp; HTML.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body style="margin:0"&gt;
  
  
  
  
          &lt;!--Slider--&gt;
  
          &lt;div style="text-align: center; background-color: #81b969"&gt;
  
  
              &lt;ul class="slides"&gt;
                  &lt;input type="radio" name="radio-btn" id="img-1" checked /&gt;
                  &lt;li class="slide-container"&gt;
                      &lt;div class="slide"&gt;
                          &lt;img src="images/3.png" /&gt;
                      &lt;/div&gt;
                      &lt;div class="nav"&gt;
                          &lt;label for="img-5" class="prev"&gt;&lt;img src="images/l-arrow.png" /&gt;&lt;/label&gt;
                          &lt;label for="img-2" class="next"&gt;&lt;img src="images/r-arrow.png" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
  
  
  
                  &lt;input type="radio" name="radio-btn" id="img-2" /&gt;
                  &lt;li class="slide-container"&gt;
                      &lt;div class="slide"&gt;
                          &lt;img src="images/4.png" height="700px" ; /&gt;
                      &lt;/div&gt;
                      &lt;div class="nav"&gt;
                          &lt;label for="img-1" class="prev"&gt;&lt;img src="images/l-arrow.png" /&gt;&lt;/label&gt;
                          &lt;label for="img-3" class="next"&gt;&lt;img src="images/r-arrow.png" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
  
                  &lt;br /&gt;
  
                  &lt;input type="radio" name="radio-btn" id="img-3" /&gt;
                  &lt;li class="slide-container"&gt;
                      &lt;div class="slide"&gt;
                          &lt;img src="images/5.png" /&gt;
                      &lt;/div&gt;
                      &lt;div class="nav"&gt;
                          &lt;label for="img-2" class="prev"&gt;&lt;img src="images/l-arrow.png" /&gt;&lt;/label&gt;
                          &lt;label for="img-4" class="next"&gt;&lt;img src="images/r-arrow.png" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
  
                  &lt;input type="radio" name="radio-btn" id="img-4" /&gt;
                  &lt;li class="slide-container"&gt;
                      &lt;div class="slide"&gt;
                          &lt;img src="images/6.png" /&gt;
                      &lt;/div&gt;
                      &lt;div class="nav"&gt;
                          &lt;label for="img-3" class="prev"&gt;&lt;img src="images/l-arrow.png" /&gt;&lt;/label&gt;
                          &lt;label for="img-5" class="next"&gt;&lt;img src="images/r-arrow.png" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
  
                  &lt;input type="radio" name="radio-btn" id="img-5" /&gt;
                  &lt;li class="slide-container"&gt;
                      &lt;div class="slide"&gt;
                          &lt;img src="images/7.png" /&gt;
                      &lt;/div&gt;
                      &lt;div class="nav"&gt;
                          &lt;label for="img-4" class="prev"&gt;&lt;img src="images/l-arrow.png" /&gt;&lt;/label&gt;
                          &lt;label for="img-1" class="next"&gt;&lt;img src="images/r-arrow.png" /&gt;&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
  
  
  
                  &lt;!--Navigation Circles--&gt;
  
  
                  &lt;li class="nav-dots"&gt;
                      &lt;label for="img-1" class="nav-dot" id="img-dot-1"&gt;&lt;/label&gt;
                      &lt;label for="img-2" class="nav-dot" id="img-dot-2"&gt;&lt;/label&gt;
                      &lt;label for="img-3" class="nav-dot" id="img-dot-3"&gt;&lt;/label&gt;
                      &lt;label for="img-4" class="nav-dot" id="img-dot-4"&gt;&lt;/label&gt;
                      &lt;label for="img-5" class="nav-dot" id="img-dot-5"&gt;&lt;/label&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;div style="text-align: center; height:170px; background-color: #81b969"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>   img {
          border: 0;
      }
  
      .slides {
          padding: 0;
          width: 626px;
          height: 600px;
          display: block;
          margin: 0 auto;
          position: relative;
      }
  
  .slides * {
      user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
  }
  
  .slides input {
      display: none;
  }
  
  .slide-container {
      display: block;
  
  }
  
      .slide {
          top: 0;
          opacity: 0;
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          -webkit-animation: slide 0.5s forwards;
          -webkit-animation-delay: 2s;
          animation: slide 0.5s forwards;
          animation-delay: 2s;
          background-color:#000000;
      }
  
      .slide img {
          width: 100%;
          height: 100%;
      }
  
  .nav label {
      width: 200px;
      height: 100%;
      display: none;
      position: absolute;
      /* opacity: 0; */
      z-index: 9;
      cursor: pointer;
      transition: opacity .2s;
      color: #FFF;
  }
  
      .prev {
          left: -200px;
          top: 170px;
      }
  
  .slide:hover + .nav label {
      opacity: 0.5;
  }
  
  .nav label:hover {
      opacity: 1;
  }
  
      .nav .next {
          left: 610px;
          top: 170px;
      }
  
  input:checked + .slide-container .slide {
      opacity: 1;
      transform: scale(1);
      transition: opacity 1s ease-in-out;
  }
  
  input:checked + .slide-container .nav label {
      display: block;
  }
  
  .nav-dots {
      width: 100%;
      bottom: 9px;
      height: 11px;
      display: block;
      position: absolute;
      text-align: center;
  }
  
      .nav-dots .nav-dot {
          top: -30px;
          width: 11px;
          height: 11px;
          margin: 0 4px;
          position: relative;
          border-radius: 100%;
          display: inline-block;
          border: 1px solid #FFF;
      }
  
          .nav-dots .nav-dot:hover {
              cursor: pointer;
              background-color: rgba(255, 255, 255, 0.8);
          }
  
      input#img-1:checked ~ .nav-dots label#img-dot-1,
      input#img-2:checked ~ .nav-dots label#img-dot-2,
      input#img-3:checked ~ .nav-dots label#img-dot-3,
      input#img-4:checked ~ .nav-dots label#img-dot-4,
      input#img-5:checked ~ .nav-dots label#img-dot-5,
      input#img-6:checked ~ .nav-dots label#img-dot-6 {
          background: rgba(255, 255, 255, 0.8);
      }
  </code></pre>
  
  <p>Here is my jsfiddle: <a href="https://jsfiddle.net/vz3bjL6s/" rel="nofollow">https://jsfiddle.net/vz3bjL6s/</a></p>
  
  <p>The images are not working but the slide show still works. I just want the 'frame' to be around the images. </p>
  
  <p>Thank you.</p>