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
Here we are using the Background Shorthand Property and you could also add a background colour in this case.
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%
Full Screen Responsive Background Slideshow Implementation
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 Demo with jQuery Cycle script then please see our live client site here.
Join in the Discussion