here is an easier way to do it using the CSS3 'background-size: cover;' option. Just set a background on the HTML element by adding this to the CSS Inserts
html {background: url(http://yourdomain.com/wp-content/images/background.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: left top;
}
That's it, all done.
=====================================
If you would like to have your background image shrink and grow when someone makes the page smaller or larger, you can do it by following the following instructions
1) create a folder in the 'wp-content' folder called 'images' (or what ever name you want to use)
2) add your large image (say 1600 x 1600) called 'background.jpg' into the 'images' folder
3) go to ATO->Body, Text & Links->Body Style and remove the 'background' statement if there is one
4) go to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top and add the following
HTML Code:
<img src="<?php bloginfo('wpurl'); ?>/wp-content/images/background.jpg" id="bg" />
HTML Code:
<img src="yourdomain.com/wp-content/images/background.jpg" id="bg" />
HTML Code:
img#bg { position:fixed; top:0; left:0; width:100%; height:100%; } #wrapper { position:relative; z-index:1; }