I was looking for a plugin that could take an image and put it fullscreen as a background on this blog. But I didn’t immediately find one, so I created one myself. I looked at the code in the google home page and started with the Hello Dolly plugin as a base template. It is just an <img> tag that is dynamically resized using jQuery. Here is the full source:

<?php
/**
 * @package Full screen background
 * @version 0.1
 */

/*
Plugin Name: Full screen background
Plugin URI: http://www.trappers.tk/share/fullbg.tar.gz
Description: Full screen background, like the google home page 
Author: Jeroen Trappers
Version: 0.1
Author URI: http://blog.trappers.tk
*/

function wp_full_bg() {
?>
   <img id="wpfullbg" src="http://www.example.org/wallpaper.png" >
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
   <script type="text/javascript" language="javascript">
     $(function() {
     	fullbg();
	    $(window).resize(fullbg);
     });
     function fullbg() {
       var imgw = $('#wpfullbg').width();
       var imgh = $('#wpfullbg').height();
       var vpw = $(window).width();
       var vph = $(window).height(); 
       
       var imgratio = imgw / imgh;
       var viewportratio = vpw / vph;

       var w = vpw;
       var h = vph;
	
       if( viewportratio > imgratio )
       {
         // screen is wider than picture -> increase the heigth of the picture;
         h = w / imgratio;  
       }	
       else 
       {
         w = h * imgratio;
       }

       $('#wpfullbg').css(
          { 
             'left': '0px',
             'width': w,
             'height': h,
             'z-index': '-2',
             'top' : '0px',
             'position' : 'fixed',
             'opacity' : '0.999999999'
          }
       );  
     }    
   </script>
<?php
}
add_action( 'wp_footer', 'wp_full_bg' )
?>

This wordpress plugin is quite simple. It defines a function wp_full_bg which will be called by the wordpress system on the action wp_footer. That’s what you can see in the final line of code. The actual code of the php-function is quite simply outputting the html and javascript.
The first thing I do is create an image with a <img> tag.
Next I import the jQuery library from the Google CDN.
Now comes the real work: I use jQuery to wait for the document to be loaded. Then I call the javascript function fullbg. I also set up a jQuery event handler to listen for changes in the size of the window with the resize function.
In the fullbg function I first find the image and get it’s height and width. I do the same for the window. Then I use the size of the window to set to size of the image using an inline css style that I apply dynamically with the jQuery css function. In between I make sure to keep the original aspect ratio of the image, and smartly resizing it to always fully fit the window.
In the style, also the position and z-index are changed, so that the image is positioned underneath the content as a wallpaper or background.

I published the plugin on wordpress.org, so it should become available directly from the wordpress admin console soon. But if you can’t wait, you can download it here or here as well.

11 thoughts on “Full screen background / wallpaper plugin for wordpress

  1. hello! i’m interested in using this plugin but the file is seems damaged. :/ can you upload it again please?

    Reply
  2. I have been looking all over for something like this. Any chance you could dumb down the installation process for me? Is it just a straight copy of the above script, and into what file? Thanks!

    Reply
    • The above comment is not accurate. The plugin disables the javascript of the themes I have tried to use with it. It looks like a great effort and hopefully some tweaks will do the trick.

      Reply
  3. Pingback: Fullscreen background plugin for wordpress with jQuery and CSS | YABoW @ trappers.tk

  4. Hi,

    I just tried the wallpaper plugin, very good. very easy! is it possible to add a number of images and have them rotate? – Like a slideshow?

    Many thanks,

    Reply
  5. Hi Jeroen,

    thanks for this plugin

    One suggestion: If you ever should update the plugin I have to manually change the image location from the plugin php-file. Instead of defining the image location within the plugin file, I created a page-template to be included in my theme, were I include the image with img src="something.jpg" id="wpfullbg". So the image is tied to the page template and not to the plugin. Maybe you’d change the way of image inclusion in future updates.

    Reply
  6. Hi Jeroen,

    The wp-jquery-lightbox plugin stops working when Full screen background plugin is installed.

    Greets,

    Martin

    Reply
  7. Hi Jeroen, brilliant plugin, I use it on a number of my websites. Thank you for sharing it with us.

    One question, I’m having a problem with the opacity of the png image. On Internet Explorer 8 it’s showing a really ugly black outline space filler everywhere. Is there a way to avoid doing this ? or should I just stuck to using jpg ?

    Thanks Jeroen

    Reply
  8. Thank you for the Plugin, its working very fine!
    What I am looking for now is to get different pictures on different pages. How can i realice that?

    Reply

Leave a Reply