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:
This wordpress plugin is quite simple. It defines a function
wp_full_bg which will be called by the wordpress system on the action
The first thing I do is create an image with a
Next I import the jQuery library from the Google CDN.
fullbg. I also set up a jQuery event handler to listen for changes in the size of the window with 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.