CSS: Full Screen Background

Here is a useful information for ‘Full Screen Background’ setup when I use Wordpress Foxy template to customize a photography webpage. I put here for quick retrieving:

With background-size, you can tell an element how large its background image must be. Like this:

#elem{
 background:url(background.jpg) center center no-repeat;
 background-size:100px 150px;
}

But even more convenient, this property supports two magical values: contain and cover:

• Contain resizes the background image so that it fits entirely in the element;
• Cover is more interesting – it makes so that the element’s background is entirely taken up by the image. The image is resized to the smallest size that allows it to cover the element entirely (see the illustration below). This is also the property we will be using for our full screen background.

So with the 2 magical values, we can customize an image as a full-screen background to the html element:

html {
    min-height: 100%;
    background-size: cover;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}
/* Workaround for some mobile browsers */
body{
    min-height:100%;
}

Before using the image, remember to use Photoshop or Illustrator to adjust JPEG to generate a suitable background image (width and height percentage, opacity etc).