Add an auto-resizing background image

GuildPortal admin site link to original post

CSS Method

*NOTE* This only works on newer browsers that support CSS3 (so it won't work in IE8 and older).

Add the following to your custom css section (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard tab)

body {
  background: #000 url(my-background-image.jpg) center center fixed no-repeat;
 -moz-background-size: cover;
 background-size: cover;
}

Then change the file url in orange to target your background image. That's it!

JQuery Plugin Method

*NOTE* This only works for content that fits on a single page... you won't be able to scroll down 

This script allows you to add a background image that fills the entire browser window and adjusts automatically when you change the browser size. I set up an example over my my test-site 3 bank tab (bank, what bank?). The script uses a jQuery plugin called maxImage (check out the other demos) that does a few other things, but I'm only covering the background image in this post.

The Code

(HTML)
<img class="bgmaximage" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg" width="1000" height="750" />

(Javascript)
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jquerymaximage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('img.bgmaximage').maxImage({
   isBackground: true,
   verticalAlign: 'top'
  });
});
</script>

Using this Script

• Add the HTML anywhere on your page... of course you could use a different image for each tab of your site.
  
  
  
  • The image tag <img> you add should have the class "bgmaximage" added to it. This is needed so the script can find and adjust it to work as your background image.
  
  
  • The background image you choose needs to have a width and height set inside the image tag (in red). The image in the example is 1000 x 1333, but because of it's size it crops part of the image. So you might have to mess around with the image size until it suits you.
  
  
• Add the script to your Banner or Footer HTML. You shouldn't have to change anything.

Updated (12/31/2010): Added CSS3 method

Shouldn't you be playing SWTOR? LOL

Well, this post is about stretching the background image, and this post is more along the lines of what you want... I think.

In the background options, add "fixed" to prevent scrolling:

bkgdOptions = '#000000 center top no-repeat fixed';