Three ways to give your WordPress site a full screen background image

New design techniques are popping up everyday and now that there are less bandwidth issues, designers have been incorporating full screen background images in their design more and more.

If you wanted to do that yourself but didn’t know how, here are a few techniques ranging from super-easy to advanced.

Super easy plugin solution

The Simple Full Screen Background Image WordPress plugin allows you to easily upload and set a full screen image as the background of your website. Once installed and activated, you’ll see in your Appearance section a new area called, Fullscreen BG Image. You can then browse for your image, upload it and insert it like you would for a blog post. Once uploaded, the plugin will do the rest and make sure that it re-sizes to fit your browser. You may need to play with the size and resolution, but using this plugin couldn’t be easier.

Simple plugin solution

Another great plugin to try is WP Supersized. This one is a bit more complicated to use and has a lot more features, but it’s fairly straightforward. Instead of uploading images to your Media Library, images need to be uploaded to the wp-content/supersized-slides/ folder, so you will need FTP access for this. If no images are uploaded, the plugin uses a series of default images. The benefit to using this plugin, is that you could have a slideshow running as well in the background.

Theme coding solution

Both plugins mentioned above use jQuery for their resizing. This same technique can of course be used without a plugin. If you would rather not have the image editable by everyone but yourself, integrating the feature directly in your theme is the option for you.

Jon Patrick Given has provided a great code snippet which I used and incorporated on the Presentation House website.

Looking at John’s code, you can see that you’ll need to download the “easy-bg-resize” javascript file, insert it in your theme and enqueue it in your functions like so:

        //Enqueue jQuery first
	wp_enqueue_script('jquery');
        // Enqueue your jQuery resize file
	wp_enqueue_script('resize', get_template_directory_uri().'/js/jquery.ez-bg-resize.js', array( 'jquery' ), '1.0');

Next you need to update your header.php with the following:

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$("body").ezBgResize({
			img     : "your image path goes here", 
			opacity : 1, // Opacity. 1 = 100%.  This is optional.
			center  : true // This is optional. Default is true.
		});
	});
</script>

So there you have it, 2 plugins and one code snippet for you to play with. As you’ve probably guessed, the code snippet provided above is not the only solution. Paul Jarvis recently launched a site for Angelica Xavier with a stunning background. Looking at his source code, he too, uses jQuery but a slightly different technique.

One comment:

Comments are Closed.