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.
//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:
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.