.. the journal of an ageing software / web developer ...

CSS Full Screen Background Image

Next week I will start work on a custom content management system for a pet portrait artist, and I wanted to create a nice login screen which showed one of her portraits as full screen image.

The CSS Tricks site has a great article showing you how to create a perfect full page background using CSS. The code to produce the screenshot is shown below.

html {
    background: url(login.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}