Full Screen Responsive Background Image with CSS

Glenn Glenn's Blog 2 Comments

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

[css]
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;
}
[/css]

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%

[css]
html, body {
width: 100%;
height: 100%;
}
[/css]

Full Screen Responsive Background Slideshow Implementation

[css]
/* 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;
}
[/css]

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

[css]
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’..jpg’, sizingMethod=’scale’);
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’.jpg’, sizingMethod=’scale’)";
[/css]

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.

About the Author
Full Screen Responsive Background Image with CSS Full Screen Responsive Background Image with CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced WordPress Web Developer, Front-end and Back-end Developer & New Media Specialist with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries built up over a number of years.

Comments 2

  1. I have found this article useful, however, for some reason the slideshow shoots immediately to the last image in the slideshow. I altered a code error in ‘Slideshow HTML Mark-up’ (; should be closed bracket). Is there anything else here that prevents this from working?

  2. Post
    Author

    Mark are you sure it’s always the last slide? Currently the slide is ‘random’ so if you remove the last line ‘,” + ‘random: 1’ then this should work?

Leave a Reply

Your email address will not be published. Required fields are marked *