title: Make a div fit all screen sizes
body: <p>I am creating a full size photo slideshow, I don't want to use images as they will be easier to copy, so instead I am using divs with background urls, however I am having trouble getting these to fit all screen resolutions. Naturally the smaller the screen the more zoomed in the photos appear. I have posted my code below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  
  html,body{
  height:100%;
  overflow-y:hidden;
  margin:0px; padding:0px;
  }
  
  .bxslider { 
  position:absolute; 
  background:red; 
  height:1000px; 
  overflow-y: scroll; 
  margin:0; padding:0;
  }
  
  .red {     
  background:red url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center     center; width:100%; height:100%; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  }
  .green {     
  background:green url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center;  width:100%; height:100%; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  }
  .blue {     
  background:blue url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center; width:100%; height:100%; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  }
  
  #bx-pager-wrapper { width:100%;  background:black; position:absolute; bottom:0; padding:30px 0 30px 0; }
  #bx-pager { position:relative; float:right; margin-right:100px; }
  #bx-pager img { padding:0 30px 0 0; }
  
  &lt;/style&gt;
  
  &lt;script src="http://bxslider.com/js/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://bxslider.com/lib/jquery.bxslider.js"&gt;&lt;/script&gt;
  &lt;script src="http://bxslider.com/js/scripts.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
    var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-36499930-1']);
   _gaq.push(['_trackPageview']);
  
  (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-    analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
  
  $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager'
  });
    });
  &lt;/script&gt;
  
  
  &lt;ul class="bxslider"&gt;
    &lt;li class="red"&gt;&lt;/li&gt;
    &lt;li class="green"&gt;&lt;/li&gt;
    &lt;li class="blue"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;div id="bx-pager-wrapper"&gt;
    &lt;div id="bx-pager"&gt;
      &lt;a data-slide-index="0" href=""&gt;&lt;img src="http://bxslider.com/images/thumbs/tree_root.jpg" /&gt;&lt;/a&gt;
      &lt;a data-slide-index="1" href=""&gt;&lt;img src="http://bxslider.com/images/thumbs/tree_root.jpg" /&gt;&lt;/a&gt;
      &lt;a data-slide-index="2" href=""&gt;&lt;img src="http://bxslider.com/images/thumbs/tree_root.jpg" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>