title: How do I use a block-level element as a background
body: <p>I am currently working on my first fully responsive website and as it seems I'm kinda stuck. Also I would provide a fiddle but I am still learning how to use it,</p>
  
  <p>Everything works like a charm, but I am still learning which means that I will occur a problem or two. I've tried different codes, trying to change the<br><code>background: url(.cycle-slideshow);</code></p>
  
  <p>I am trying to use the</p>
  
  <pre><code>    .cycle-slideshow {
          height: 100%;
          width: 100%;
          display: block;
          position: relative;
          margin: 0 auto;
      }
  </code></pre>
  
  <p>as a background so I can use this ontop of the background, because as you can see its hiding behind the slideshow.</p>
  
  <pre><code>/*Menu CSS*/
  
              #sidebar {
                  background: #151718;
                  width: 200px;
                  height: 17%;
                  display: block;
                  position: absolute;
                  left: -200px;
                  top: 0px;
                  transition: left 0.3s linear;
              }
  
                  #sidebar.visible {
                      left: 0px;
                      transition: left 0.3s linear;
                  }
  
              ul {
                  margin: 0;
                  padding: 0;
              }
  
                  ul li {
                      list-style: none;
                  }
  
                      ul li a {
                          background: #1C1E1F;
                          color: #ccc;
                          border-bottom: 1px solid #111;
                          display: block;
                          width: 180px;
                          padding: 10px;
                          text-decoration: none;
                      }
  
              #sidebar-btn {
                  display: inline-block;
                  vertical-align: middle;
                  width: 20px;
                  height: 150px;
                  cursor: pointer;
                  margin: 20px;
                  position: absolute;
                  top:0px;
                  right:-60px;
              }
  
                  #sidebar-btn span {
                      height: 1px;
                      background: #111;
                      margin-bottom: 5px;
                      display: block;
                  }
  
                      #sidebar-btn span:nth-child(2) {
                          width: 75%;
                      }
  
                      #sidebar-btn span:nth-child(3) {
                          width: 50%;
                      }
  
  
  
  /*Menu CSS*/
  </code></pre>
  
  <p>but I cant seem to get it to work with HTMl, will I have to use a JQuery function to get it to work?</p>
  
  <p>Here is the source code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Full Width Responsive Image Slider&lt;/title&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://malsup.github.com/jquery.cycle2.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
              html, body, img {
                  padding: 0;
                  margin: 0;
                  height: 100%;
                  width: 100%;
                  background: url(.container);
              }
  
              body {
                  font-family: "Helvetica Neue", Helvetica, Arial;
              }
  
          .container {
                  height: 100%;
                  width: 100%;
                  overflow: hidden;
              }
  
              .cycle-slideshow {
                  height: 100%;
                  width: 100%;
                  display: block;
                  position: relative;
                  margin: 0 auto;
              }
  
              .cycle-prev, .cycle-next {
                  font-size: 200;
                  color: #FFF;
                  display: block;
                  position: absolute;
                  top: 50%;
                  margin-top: -16px;
                  z-index: 9999;
                  cursor: pointer;
              }
  
              .cycle-prev {
                  left: 10%;
              }
  
              .cycle-next {
                  right: 10%;
              }
  
              .cycle-pager {
                  width: 100%;
                  text-align: center;
                  display: block;
                  position: absolute;
                  position: top;
                  bottom: 20px;
                  z-index: 9999;
              }
  
                  .cycle-pager span {
                      text-indent: 100%;
                      white-space: nowrap;
                      ;
                      width: 12px;
                      height: 12px;
                      display: inline-block;
                      border: 1px solid #FFF;
                      border-radius: 50%;
                      margin: 0 10px;
                      cursor: pointer;
                  }
  
                  .cycle-pager .cycle-pager-active {
                      background: #FFF;
                  }
  
  
  /*Menu CSS*/
  
              #sidebar {
                  background: #151718;
                  width: 200px;
                  height: 17%;
                  display: block;
                  position: absolute;
                  left: -200px;
                  top: 0px;
                  transition: left 0.3s linear;
              }
  
                  #sidebar.visible {
                      left: 0px;
                      transition: left 0.3s linear;
                  }
  
              ul {
                  margin: 0;
                  padding: 0;
              }
  
                  ul li {
                      list-style: none;
                  }
  
                      ul li a {
                          background: #1C1E1F;
                          color: #ccc;
                          border-bottom: 1px solid #111;
                          display: block;
                          width: 180px;
                          padding: 10px;
                          text-decoration: none;
                      }
  
              #sidebar-btn {
                  display: inline-block;
                  vertical-align: middle;
                  width: 20px;
                  height: 150px;
                  cursor: pointer;
                  margin: 20px;
                  position: absolute;
                  top:0px;
                  right:-60px;
              }
  
                  #sidebar-btn span {
                      height: 1px;
                      background: #111;
                      margin-bottom: 5px;
                      display: block;
                  }
  
                      #sidebar-btn span:nth-child(2) {
                          width: 75%;
                      }
  
                      #sidebar-btn span:nth-child(3) {
                          width: 50%;
                      }
  
  
  
  /*Menu CSS*/
  
  
  
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="sidebar"&gt;
  
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
  
      &lt;div id="sidebar-btn"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
  
  
  
  
      &lt;/div&gt;
  
      &lt;!-- Full Width Responsive Slider --&gt;
  
      &lt;div class="container"&gt;
  
              &lt;div class="cycle-slideshow"&gt;
              &lt;span class="cycle-prev"&gt;〈&lt;/span&gt;
              &lt;span class="cycle-next"&gt;〉&lt;/span&gt;
              &lt;span class="cycle-pager"&gt;&lt;/span&gt;
              &lt;img src="images/picOne.jpg"&gt;
              &lt;img src="images/picTwo.jpg"&gt;
              &lt;img src="images/picThree.jpg"&gt;
            &lt;/div&gt;
          &lt;!-- Full Width Responsive Slider --&gt;
  
          &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
  
          $('#sidebar-btn').click(function(){
              $('#sidebar').toggleClass('visible');
  
          });
      }); 
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>