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.


There are no comments yet. Feel free to leave a reply using the form below.

Post a comment

You can use Markdown with $\LaTeX$ formulas in your comment.

You agree to the publication of your comment on this page under the CC BY 4.0 license.

Your email address will not be published.