Knowledge for the World
How to create a full-page (cover) background image using CSS

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

  • by Zach (153)
  • Time to complete: 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.

1

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

2

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;
}

3

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')";