Fullscreen background image with CSS

Whether it is a good idea or not, one may want to set up a full-window background image in a given web page. Since I happened to do this a couple of times, I’m giving here a simple, CSS-only snippet doing the job. The idea is to insert an image tag:

<img id="background" src="..." />

right after <body>, and style it with absolute positioning. Also, add a negative z-index so that it is rendered below all other elements:

img#background {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

This snippet is adapted from this CSS trick.

Discussion ¶

Feel free to post a comment by e-mail using the form below. Your e-mail address will not be disclosed.