How to create a full-page (cover) background image using CSS

Zach Zach (236)
5 minutes

Using CSS, you can display beautiful background images that span the entirety of the user's window -- regardless of their resolution. Here's how to do it.

Posted in these interests:
h/webdesign17 guides
h/www5 guides
h/css4 guides

Upload your background image onto your web server. I recommend a background photo of at least 1200px in width.

html {
    background: url('images/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

To add support for older versions of Internet Explorer, add the following lines:

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

Zach Zach (236)
5 minutes

SVGs are great; making them smaller makes them even greater. This guide will show you how to optimize SVGs.