title: Getting Slick image slider to always cover as background
body: <p>I am using <a href="http://kenwheeler.github.io/slick/" rel="nofollow">Slick</a> as a full width background slider. I just want a slideshow that is covering the whole background. My problem here is that the images seems to only adjust automatically to the width of the page. This means that if the browser gets too narrow, the image will not cover the whole height. I wonder if there is some good way of adjusting the image size to always cover the background. I want the image to either overflow horizontally or vertically depending on the browsers aspect ratio. </p>
  
  <p>The div displaying the slider is styled as:</p>
  
  <pre><code>#background {
      position: fixed;
      z-index: -2000;
      top:0;
      left:0;
      width:100%;
  }
  </code></pre>
  
  <p>I have a jquery solution which seems to work but I do not really know if this is a good solution:</p>
  
  <pre><code>$($('#background').find('img').first()).on('load', function(){
      var bgWidth = 
          $(window).height() / 
          $('#background').find('img').first().height() *
          $('#background').find('img').first().width();
  
      // Initiate background slider
      $('#background')
          .slick({
              dots: false,
              autoplay: true,
              autoplaySpeed: 6000,
              pauseOnHover: false,
              fade: true,
              arrows: false,
              mobileFirst: true,
          })
          .css({
              'height':'100%',
              'min-width': bgWidth,
          });
  });
  </code></pre>
  
  <p>Is there a better solution out there or is this good enough?</p>