Add a Full Screen Background Image in Thesis

There are a bunch of jQuery plugins and standard HTML/CSS solutions out there for creating a full screen, or full page background image that will stretch the image to the full width of the browser window. So basically no matter what size the screen is, it will resize the image accordingly. Here are a few that I found while searching:

• bgStretcher
• Perfect Full Page Background Image
• Effortless Full Screen Background Images With jQuery
• Supersized – Full Screen Background/Slideshow jQuery Plugin
• Resizable full-browser background image with jQuery (preserving aspect ratio)

There are numerous variations for creating the full screen background image, depending on your needs. For example, you can have just a single image, a series of images that rotate, and also you could have content above the image or not. I was working on a website for a client and there was a need to have a series of full screen background images on the home page that rotate and have some content above the image.

I ended up going with bgStretcher, but now I had to make it work in Thesis.

When we talk about jQuery Plugins we aren’t talking about traditional WordPress type plugins. jQuery plugins need to get integrated into the site by adding the necessary code in the right places and referencing the required plugin file.

How to Add a Full Screen Background Image in Thesis

It doesn’t matter which method you use from the list above, and you may even find a different one you prefer, but the concept is the same. In fact, this is a great lesson about Thesis hooks and how to add pretty much any custom functionality or content. Once you understand the concept, you can integrate almost anything you want.

So, let’s take a look at this. We’re going to integrate this jQuery plugin to display a full page background image in Thesis.

Step 1: Download the script

You can visit the bgStretcher page to download the file you need. Specifically, you want the file called bgstretcher.js. Upload this file to a new folder inside your custom folder called “js”. So it will look like this: /wp-content/themes/thesis_x/custom/js. The file needs to be inside the ‘js’ folder.

Step 2: Add the Scripts

Add this to your custom_functions.php file:

function fullbg() {
if (is_front_page()) {
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/bgstretcher.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
        //  Initialize Backgound Stretcher	   
		$(document).bgStretcher({
			images: ['<?php bloginfo('template_directory'); ?>/custom/images/sample-1.jpg', '<?php bloginfo('template_directory'); ?>/custom/images/sample-2.jpg', '<?php bloginfo('template_directory'); ?>/custom/images/sample-3.jpg'],
			imageWidth: 1024, imageHeight: 768
		});
	});
</script>

<?php } }

add_action('thesis_hook_after_html','fullbg');

Here’s what’s happening with this:

1. I’m using a WordPress conditional tag so that this only appears on the home page. You can either remove this, or modify it so that it shows up where you want.
2. We’re loading the jQuery library (*** IMPORTANT – If you already have jQuery being loaded, there is no need to do it again.)
3. I’m inserting this code toward the bottom of of the site by using the thesis_hook_after_html hook.
4. We’re referencing the bgstretcher.js file. (If you’re using a different plugin, the concept will be the same.)

5. We’re defining the path and filenames of the images. You can change the filenames to the actual filenames of your images.
6. We’re applying some options (imageWidth:1024, imageHeight:768). You should check the instructions page for this plugin for additional options. In my case, I also added these options because I wanted a delay between each slide and also a transition speed: nextSlideDelay: 10000, slideShowSpeed: 1000,

Step 3: Upload Your Images

You will need to upload your images that are referenced in the above script to the images folder inside your custom folder.

Step 4: Add the CSS

You’re going to need to reference the css file supplied with this plugin. It’s called bgstretcher.css. You can either include this as a separate css file, which you will need reference in the head section of the site, or you can paste the contents into the custom.css file.

That should do it as far as adding the full screen background images

This is all you need to do in order to get the full page background images working. Now, if you want to add text above the image, you will just need to add this inside the custom.css file to the css selector that contains the content you want to appear above the image:

position: relative;
z-index: 2;

For example:

.custom .format_text {
      position: relative;
      z-index: 2;
}

Hopefully this all makes sense for you. If you have questions or something to add, feel free to leave a comment below.

Tagged as: thesis tips