Note: As WordPress continues to make major changes to their API, I have lost interest in maintaining this plugin. There are currently a lot of compatibility issues that need to be resolved. If you are interestd in updating this code or even taking over this project please feel free, by contacting me at davetcoleman@gmail.com. I no longer support this plugin.

 

Live Demo
Download on WordPress.org

Keep your site looking fresh with changing backgrounds!

Show a random background image every visitor session (using a cookie), page refresh, or timed slideshow interval. Choose between fixed full screen background, full width scrolling background, or classic non-scaled backgrounds. Supports background fade effects and optionally integrates with NextGen Gallery plugin. Replaces the built-in WordPress Background settings page.

Makes having cool backgrounds easy.

Features!

• Randomly change the background images – once per visitor session (using a cookie), once per page refresh or continuously using a slideshow-like timer.
• Upload background images using the NextGen Gallery plugin (must install first) or manually through FTP uploads
• 3 Layout options – “Better” “Classic” and “Developer” – with many options
• Optionally scales your background to fit the user’s exact monitor size.
• Allows for random backgrounds to repeat/tile
• Optionally fade in background dynamically using jQuery.
• Set the background color of the page.
• Cross-Browser Tested with WordPress’ default Twenty Ten 1.2 and Twenty Eleven 1.0 themes. Passes W3C Validation.
• Works with most custom themes
• Allows for custom integration with DOM object names and function calls.
• Internationalized

Technical Details
When changing background image every visitor session, a temporary cookie is made so that the chosen background image remains the same for the entire visit of the user on your site. The next time they visit your site, and once the browser cookie has expired, a new image will be randomly chosen. This is usually every 6 hours, but may vary due to various reasons.

The plugin is optimized to not affect your page’s load time because it requires no extra style sheets or javascript files to be loaded. The only exception is that it will load jQuery if you choose to have a fading background or slideshow-like image changing, but chances are you are already using jQuery.

Changelog
See the WordPress plugin page for up-to-date information about current and past versions.

Layouts

FAQ/Past Fixes

The background is on top of everything else on the page!
There are several possibilities to this problem.

1: First, check the z-index of your page’s wrapper (the outer most div or dom element inside the body). The Better Background plugin adds an image below everything else on the page using a css property of z-index:-1; . If you are having trouble with hidden content change your page’s wrapper css style to have the following two properties:

z-index:2;
position:relative;

You can edit your style sheet from within your site’s admin, clicking on the Appearance menu and then Editor. Find the file style.css on the right and open it. Find the style for your wrapper (probably #wrapper) and adding those two lines of code.

2: It is possible that your theme has its wp_footer(); within a div or other page element. Normally that function should be the last thing called before the </body> tag is listed in your footer.php file. If it is not, move it to be right above the </body> tag. This was a fix needed to enable the Better Backgrounds plugin to work with the popular Photocrati theme.

The background image is not showing at all!
This usually is because of a strange css style sheet setting or layout from a particular theme. First, remove any default background images that might already be set by your theme. This will both prevent conflicts and also save your page load time. To remove default bg images, open your style.css file or equivalent. You can edit your style sheet from within your site’s admin, clicking on the Appearance menu and then Editor. Find the file style.css on the right and open it.

Inside your style sheet look for any “background-image:” or “backckground:url()” attributes added to things like the “#wrapper” or “body”. If you are going to use this plugin you don’t need those background image settings anymore and can remove them. Save the changes to your stylesheet and check if it has fixed the problem.

Unfortunately, this is no science because of the huge amount of different themes out there, and if this does not help, contact me.

The background image is loading too slow in “Better Background” mode
This is because the background image is added to the bottom of the page and everything else is loaded first. Unfortunately WordPress does not allow plugins to easily add code to the top of the page inside the tag, so you’ll have to do it manually.

First, within your site’s admin click on the Appearance menu and then Editor. Find the file header.php on the right and open it. Scroll down within your template’s code to where the <body> tag starts. Right under the <body> tag add this line of code:

<div style="display:none;"><img src='<?=background_image();?>' /></div>

This will tell browsers to load your background first in a hidden div tag. Note: this function only works in WordPress 3.0 and higher.

The background isn’t showing in Opera
Edit your style.css styles for the “body” tag and remove any hard-coded background styles (eg background-attachment, background-image, background-color, etc)