Better Backgrounds – WordPress Plugin

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

Better Background, Fixed. Background remains the same as you scroll down the page. Scaled and centered to fill entire browser window. Easiest background to implement well.

Better Background, Scrolling. Background aligned to top of screen and moves out of view as you scroll down the page. Scaled to full browser width and custom height (default: full browser height). A graphical fade on the bottom of the background image or secondary background pattern is recommended.

Classic, Scrolling. More standards compliant using the body’s background tag. Does not scale the background to fit the page’s width, so make sure background is high enough resolution for widescreen monitors. Does not support fading in.

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)

  • http://blog.ambaphotography.com Anna

    Hi there! I’m afraid I installed the NextGen to use with this plugin, but it does not seem to work. It does not see the galleries I made in the gallery plugin. Are there some special setting you have to use with the plugin? Would really appreciate help!
    Anna

    • Anonymous

      Hi Anna! I think I have identified the problem. Do you know by chance if your WordPress was installed with a database prefix other than “wp_”? Normally the galleries are in the table “wp_ngg_gallery” but you might have changed this setting. This is ok, its a problem with my plugin. The fix will be released within the next day.

      • Anna

        Oh yes I just saw your comment I do have a different prefix in my wordpress database.  Maybe I will try again. Thanks!

  • Stayonpoker

    Hi this plugin still miss key fetures like click able links on every background images,that would be cool.

    • Anonymous

      This is coming soon

  • Frank

    I’m using this at my WordPress, works perfect. I’ve disabled my default background, works perfect in Firefox and IE, but not in Chrome. Any suggestions?

    • Anonymous

      Interesting, because I do all my development in Chrome and have never had a problem (of course I test in the other browsers too). Could you send me a link to your website or demo website with the plugin enabled so I can diagnose? 

  • http://www.facebook.com/amcreatives AnnMarie Soto

    Can you direct the type of image based on page or post category?
    For example, my site is for a lingerie store, and they want a specific type of background for bridal vs exotic vs club wear vs classic lingerie…

    lacedinlove.com

    • Anonymous

      Hmmm, interesting idea. So it could allow you to specify multiple backgrounds folders – each one associated with a category. Would you only want to have one image in that category, or have multiple images for each category? I’ll consider it but I’m a little afraid of “scope creep” such that it has too much functionality.

      • Sylwia

        I need such a feature too. It’d be enough for me if one could choose one picture for a category.

        • A.N. Other

          :) I came here looking to see if anyone else was looking for this or found a way to make it work

          Great plugin, thanks waffleguy4!

        • Anonymous

          Thank you for your reply. I can’t guarantee anything this moment but this will probably be a future feature.

  • Pingback: Background Images page created. | Stacey Reid

  • Sylwia

    I would like to put a background image over the changing backgrounds. I want to put a .png for a raster effect. I tried the usual, i.e. adding the image to the wrapper in my css but it doesn’t work. Could you give me a hint where or how I should add the pic?

    • Anonymous

      I think I know what you mean. I originally made this plugin for this site: http://acruwealth.com/. On it you’ll see there are two backgrounds – the top image and the bottom repeating wood texture. The wood image is the “classic” backgrounds and the top image is the absolutely-positioned div on top. You can do either of these methods with my current plugin – but not both. If you want both, you’ll have to do some css and html editing yourself. It sounds like what you are looking for is the opposite of what I did on that website. To get that effect, use the “Fixed Full Screen Background” option of my plugin, and then set the other background using wordpress’s default background functionality, or manually. Its a hard thing to explain, I know…

  • Zerocool Marius

    this plugin has errors
    CSS and XHTML 1.0 Transitional

    • Dave Coleman

      The type attribute is required in HTML 4, but optional in HTML5. I almost completely develop in html5 now so have those habits now. But you are right, it needs to have backwards support.http://www.w3schools.com/html5/tag_script.asp

    • http://dav.ee Dave

      I reviewed the plugin’s and tags and they all appear to have the correct declarations. Please explain further.

  • Zerocool Marius

    Value Error : max-width

    Property max-width doesn’t exist for media screen : 1024px

    1024px

    45
    .entry img, .entry embed, .entry object

    Value Error : width

    Parse Error

    this.clientWidth > 658 ? 658 : true)

    312

    Value Error : float

    Parse Error

    346

    Value Error : float

    Parse Error

    369

    Value Error : float

    Parse Error

    392

    Value Error : float

    Parse Error

    415

    Value Error : float

    Parse Error

    448

    Value Error : float

    Parse Error

    471

    Value Error : float

    Parse Error

    494

    Value Error : float

    Parse Error

    527

    Value Error : float

    Parse Error

    550

    Value Error : float

    Parse Error

    573

    Value Error : float

    Parse Error

    605

    Value Error : float

    Parse Error

    640

    Value Error : float

    Parse Error

    663

    Value Error : float

    Parse Error

    686

    Value Error : float

    Parse Error

  • Zerocool Marius

    …lass=”bg-rand” src=”http://xxxxxxxxxx/bg-images//take7.png” />

    The attribute given above is required for an element that you’ve used,
    but you have omitted it. For instance, in most HTML and XHTML document
    types the “type” attribute is required on the “script” element and the
    “alt” attribute is required for the “img” element.

    Typical values for type are
    type=”text/css” for
    and type=”text/javascript” for . })();

    You may have neglected to close an element, or perhaps you meant to
    “self-close” an element, that is, ending it with “/>” instead of “>”.

    i think this is all
    any fix?

  • Zerocool Marius

    hey …
    i like the new version of the plugin 3.0.0, i have no moew XHTML errors but i found a bug and i have a suggestion
    the bug is on the Fade-In option
    after i activate it, i can’t deactivated it whatever i ‘do…
    and my sugestion is under this option to have another one that will allow us to set the fade-in time, in seconds,  ..
    faster or slower

    • http://dav.ee Dave

      Okay Zerocool, I have fixed the Fade-In option problem in version 3.0.1 and also I’ve added an option to specify in milliseconds how long the fade-in time effect runs. Enjoy (and maybe  donate?)!

  • Zerocool Marius

    i have no more XHTML errors
    sorry for the typoe

  • Stig

    Great plugin.
    A small bug I discovered. When Classic Background is chosen, the background image will always be positioned to the left regardless if left, center or right is chosen as position.

    Regards
    Stig

    • http://dav.ee Dave

      Thanks, will fix asap!

    • http://dav.ee Dave

      The fix for your reported issue has just been released.

    • Stig

      Version 3.0.3 seems to have fixed this problem. Well done!

  • evsite

    Hey, thanks for the awesome plugin!
    But i have a question, as I want the plugin to work only on a selected template page
    what should I put in the header?
    <img src='’ /> code just drops the image in the background with no plugin effectsCheers!

    • http://dav.ee Dave

      The plugin is not designed to work only on certain pages. However, if you really wanted to you could choose Developer layout and then specify the id or class name of a div that is only on that one template page. The div would have to already be styled correctly to show as a full background. There are other cleaner methods but they would require some php modification in the plugin.

  • Lartialmic

    When i activate the plugins : Fatal error: Call to undefined function get_background_color() in /var/local/webroot/hosting/pub/wp-content/plugins/better-backgrounds/better-backgrounds.php on line 50

    • http://dav.ee Dave

      Thanks for the feedback! I just looked in the WordPress code and realized that function only works in WP 3.0.0 and up. I assume you haven’t upgraded? That’s fine – I’m going to be releasing a patch update tonight. Could you please let me know if you have any other problems? Thanks!

      • Lartialmic

        Thanks for reply. I’ll test new version asap…

        • http://dav.ee Dave

          The fix for your reported issue has just been released.

    • http://dav.ee Dave

      I haven’t finished testing in IE, the new version won’t be out tonight. Sorry, I lied.

  • Geert

    fade in // fade out would be so awesome or some transaction possibility keep up the good work. :-)

    • http://dav.ee Dave

      This feature is already available unless you are using the “Classic” option. Please explain…

  • Rusty 2000

    Hello I am trying to accomplish different background by category
    like that gut pointed out

    You can see it done to great effect here:
    http://www.portmarnockgolfclub
    any help

    • http://dav.ee Dave

      This feature adds significant complexity to the plugin and is not something I’ve gotten around to adding yet. Donations/funding to add this feature will certainly motivate me :-)

  • Kris

    Hi There!
    I have installed your plugin on my page and it is all working fine apart from when I click on a permalink to read a single post entry the background disapears! Was just wondering if this was a common fault or if you knew a way around it?? 
    Thanks in advance for your help!!
    Kris

    • http://dav.ee Dave

      I do not believe it is a common fault and am not sure of a work around at this point.

      • Kris

        Its ok its all sorted now mate! Was missing wp_footer(); at the bottom of the page! Thanks for emailing me about it too!

  • http://haileynordstrom.ca Hailey

    Hi Dave!

    This is awesome and exactly what I’ve been looking for – however it doesn’t seem to work for changing background on any template I use. I am currently trying “twenty eleven”. Do I have to adjust the css to make it work?

    Thank you kindly,
    Hailey

    • Hailey

      I should add – I don’t see any background image at all. I have already installed nextgen, and uploaded a test image to try it out.

    • http://dav.ee Dave

      Hi Hailey,

      I just updated my demo page to the latest version of WP and the Twenty Eleven theme. I re-tested it in Chrome, FF, and IE7. It is still working for me. http://www.dav.ee/better-backgrounds/ What browser are you having trouble in?

  • Dinamita

    in either “Classic Background” use the jQuery fade effect to show background. thanks

    • http://dav.ee Dave

      this comment does not grammatically make sense.

  • Dinamita

    or as in the “Better”, the background image to center and keep the format and proportions. Now plug stretches from the upper left corner.

  • vasily

    Hi I’m from Russia, so do not be offended by the translator.My question is: why when you change the background image is huge, and I want to make it smaller.

    • http://dav.ee Dave

      i do not understand.

      • Argument

        Кажется автор плагина не любит русских и не говорящих на оксфордском английском, вот и пишет: “мая твою не понимать”. Хотя ясно написали оба посетителя, что им нужно сделать чтобы фон не изменялся по ширине и располагался по центру в верху, а не в левом верхнем углу. Автор, нужно быть доступнее и люди к тебе потянутся. А за плагин спасибо.

  • http://austenetterespublica.wordpress.com Sylwia

    You were getting posts in Russian…

    If I understood them well, what they wanted was to know how to use smaller pics, instead of having them resized to the width and height of the browser window.

    • http://dav.ee Dave

      Thank you for the translation :-) 
      As far as having smaller pics, you can do this in the “Classic” mode if you choose “no-repeat” and maybe “centered”

  • Anonymous

    Hi Dave,

    I’m using the “developer option”, and having the background appear for #content div as well as “every page refresh” option, but the background does not fade in even though the Jquery option is selected. Can you please let me know if this is possible, or if there is some Javascript I need to add?

    Thanks! Great plugin.

  • Anonymous

    Hi Dave,

    I am using the “developer option” and to have the backgrounds appear in a #content div, as well as the “every page refresh” option, but the backgrounds do not fade in even though the JQuery option is selected. Can you let me know if this is possible, or if I need to insert any Javascript?

    Thanks! Great plugin.

    • http://dav.ee Dave

      It should fade in – sounds like a weird quirk. Can you email me the link to your site?

  • Phil

    Thank you for the awesome background plugin.

    One question / request. Is it possible to have only certain pages to have the background?

    Thanks

    • http://dav.ee Dave

      That would be a great feature but I have not added it yet, sorry.

      • Phil

        Dave, I am grateful either way.

        My best

    • Anonymous

      Actually, I was able to due this through CSS. Just make sure you body tag is referencing a page-id or page-name:

      post_name; body_class($page_slug); ? >

      And then for that CSS just list the page class with no background-image:  .page-18 {background-image: none;}

      • http://dav.ee Dave

        Very clever!

        • Phil

          Dave, could you kindly explain what krmediadesigns was saying to do a little more in detail?

          Thanks

        • Phil

          It’s me again. haha

          I was able to figure out what krmediadesigns meant by CSS.
          Unfortunately, when I used the Classic Background layout mode, the scaling and fade-in does no longer work which is the beauty of BBG plugin.

          Could you please suggest any other method to get this to work on Better Background mode with the ability to turn off the blog sections of the template (.blog .single)?…please

          Thanks much

      • Phil

        Thanks for the krmediadesigns.
        I appreciate it.

        Best regards

      • Phil

        I got a questions.

        If I want to omit all blog pages, what do I need to write the body tag?
        <body >

        I tried by doing the following but it did not work.

        In the header.php
        <body >

        then created a class called .blog in the themes style.css

        Thanks

        • Phil

          header.php
          from
          “<body >”to”<body >”

          • Phil

            header.php
            from
            < body >to< body >

          • Phil

            Sorry about the mess.

      • Phil

        After trial and error, I could not get the background to not appear for the blog section of the template.
        Any pointers would be appreciated.

        header.php
        < body >

        style.css
        . blog . layout-2cr { background-image: none ;}

        Thanks

  • Ron

    Dave, your plugin is exactly what I’m looking for! Thank you so much for the tremendous work. 

    I have a problem: I just can’t get the background to fade in or loop through. I’m using the theme Atahualpa 3.6.7. in WP 3.2.1. Here’s a link to a test site: http://www.massinertia.com/QStudio/ (Yes, the URL is case sensitive.)

    What do you think the problem could be?

    How can I fix it?

  • http://dav.ee Dave

    Woa, that would be cool but would be a very large expansion of the plugin’s current feature set that might negatively complicate the functionality of the simple plugin. I think I am a fan of the 1st suggestion, but not so much the second. The WUnderground API is for non-commercial use only, and I couldn’t guarantee that the sites this plugin is used on are non-commercial (many aren’t).  Also, where would the site’s weather be based on – the location of the web server, the location of the place the site is representing (if any) or the location of the user who is visiting the site?

    Thank you for your suggestions, I will continue to consider them!

  • TheCollectorz

    I love the plugin but unfortunately I can’t get it to work with the Adventure 1.4.6 theme. It has a static background picture and when I remove the CSS line “background: fixed center center url(images/02.jpg) #000;” it just gives a white screen. My stylesheet-foo is no good so I’m at a loss for how to fix it. Any guidance would be GREATLY appreciated.

  • http://britishletterpress.co.uk Ben B

    Thanks for a super plugin. I will “+1″ to the suggestions for a category/tag/page-driven background.  I wonder if an interim approach would be to have a input box on your options page and drive custom image URLs with CSS; and add CSS hooks to your code?  If people are using twenty ten or twenty eleven then page/category/date etc. could all be driven with CSS.

    I should add that I will make a small donation towards this type of functionality, if that would encourage development!

  • Jennimurr

    I have the plugin set to the recommended Better Background, with the intervals selected, using .png files. It works in all the browsers except IE9. The first image shows, but it won’t change or rotate through the other images.

    Can you let me know what I need to do to have this work in IE9?

    Thank you,

    Jenni

  • Alexa

    Installed the plugin at WP3.2.1 with Desk Mess Mirrortheme. Settings are with Continuously On Timer Interval (Slideshow)
    As soon I click on a(any) link it refreshes background although it has timer on 120 seconds. When I  just read and wait for what happends the bgr refreshes nicely every 2 minits to another one.
    Install was ok, no errors, but did I make a mistake or is it maybe possible that the theme causes the problem?

    • Alexa

      Tested with firefox 6.02 and IE9/Opera 11.51 /Google Chrome 14.0.835.186 m on a Win7 64bit system.
      Theme version is:Desk Mess Mirrored 1.9

  • Guy

    Excellent plugin, have it working fine with Brightbox theme on Classic background (Better background doesn’t seem to work but it’s doing what I wanted anyway). One feature request – could you be able to choose two different images e.g. one for left and one for right align? I have some random photos I am using for background interest which are faded PNG. It would be good to be able to have one at each corner of my site. Thanks, keep up the good work!

  • Frank (NL)

    Plugin does not work. NextGen does not work either.  On 3 different WordPress (3.2.1) installs on different servers.
    Seems broken and therefor useless, sorry.

  • Megadeth

    When i tick the Fade In option on, the bacground images wont rotate. But when the Fade In option is off, works fine

  • http://www.facebook.com/ut.markle Mark Gardner

    This plugin is just what I was looking for. I’m just having a little problem…
    I just can’t seem to get the Better Background option to work. I really want to have it scale to the browser window but I can’t seem to get that to work. So I’ve adjusted my images and I’m using Classic mode. But some tablets with smaller screens are cutting off images. I’m testing with Chrome and IE9. (also an Asus laptop running Android) Trying to use the Better Background option just gives me a black screen. With earlier slightly smaller images it scaled them too big. I made the images larger so they’d work better in Classic mode so I’m assuming they’re scaling so big that all you can see is black. I’m using the Sandbox theme for now and I’ve taken out all the background tags I can find. 
    Is there something I’m doing wrong? Any help would be greatly appreciated.

  • xBoss

    Nice plugin!
    I use it here:  http://www.personofinterest.in

    One micro bug. Classic bg does not support jquery fade but if u leave fade checked in better bg then switch to classic you have to rem to uncheck fade or you get white page flashes on page loads.

  • http://dav.ee Dave

    Dear Better Background Users,

    I am no longer a full time practicing web designer and have returned to the academic world of graduate school. Because of research, teaching and other responsibilities I do not have time/motivation to continue to support this plugin without some small amount of financial motivation. 

    If you really desire technical support or are requesting small bug updates I will gladly do them but I have to ask that you make a Paypal donation of ~$20 USD before I can respond to you. My apologies if this is un-agreeable to you, but I have already poured countless hours into this plugin for free and no longer have the time to do so. If you donate than I will be more than happy to assist you within 1 business day, and if I am unable to fix your problem I can refund you your donation. Please email me your questions to dave@dav.ee

    Thanks for your understanding!