Full Screen Responsive Background Image with CSS

Here is our CSS for a full-screen responsive background image that uses the css cover property. This means that the background image is full-screen, but also that it dynamically adjusts/crops so that there is no image distortion:-

Basic CSS3 Implementation

body {
  background: url("your-image.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Here we are using the Background Shorthand Property and you could also add a background colour in this case.

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

It does not matter if one of the property values is missing, as long as the ones that are present are in this order.

If you are using a div make sure it is width: 100%; and height:100%;. You may also need to set the body and html to 100%

html, body {
width: 100%;
height: 100%;
}

Full Screen Responsive Background Slideshow Implementation

/* Full Screen Background Slideshow  */
.slideshow {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 0;
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    list-style: none;
    overflow: hidden;
}
.slideshow li  {
/*background-image: url('your-background-image.jpg');*/
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    width: 100%!important;
    height: 100%!important;
    max-width: 100%;
    max-height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-origin: content-box;
    display: block;
}

You can also add the following filters for older browsers to the li:-

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='..jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.jpg', sizingMethod='scale')";

Slideshow HTMl Markup

<ul class="slideshow">
<li style="background-image: url(your-background-image-1.jpg)"></li>
<li style="background-image: url(your-background-image-2.jpg)"></li>
<li style="background-image: url(your-background-image-3.jpg)"></li>
</ul>

Cycle the Images with jQuery Cycle

<script type="text/javascript">
jQuery(document).ready(function($){
$('.slideshow').cycle({
    speed: 2500,
    manualSpeed: 100,
  	random:  1
});
      });
</script>

Here we assume you are using the full size background image in a dynamic slideshow / gallery, but if you want it for a single image then you can just use the CSS for ‘slideshow li’ and uncomment the /* */ to insert an image url. If you want to see this in action with jQuery Cycle script on the li then please see our live client site here.