Metadata

This can be applied to any website or CMS if you place the code in the right places but for now we’re going to learn hot to have a full screen background image in a WordPress website.

If you’re not comfortable editing some of your theme’s code you should download this great plugin that will do all the work for you: Simple Full Screen Background Image. However, it is best to install as fewer plugins as posible and using this method is very easy.

There are lots of ways to accomplish this, Chris Coyier has a great post about a bunch of these methods with examples here. But this is the method that works best for me, it works in all modern browsers as well as IE8 and 9.

First we are going to insert an inline <img> element in our footer (footer.php file) outside the footer <div> with an id that we’ll use in our CSS code and the path to our background image:

<img id="bg_image" src="/bg.jpg" />

Now we need to insert this in our style sheet (style.css file):

img#bg_image {
	min-height: 100%;
	min-width: 1024px;
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -9999;
}

And if you’re using media queries insert this:

@media only screen and (max-width: 1024px) {
	img#bg_image {
                left: 50%;
                margin-left: -512px;   /* 50% */
    }
}

That should do the trick for you.