Great stuff. Thanks for your valuable contribution Stylie. (Note: Code and comments edited for brevity.)

/* 2 column css layout with sticky footer */
* {
margin: 0;
padding: 0;
}
html,body {
margin: 0; padding: 0; width: 100%; height: 100%;
}
#bg_image {
position: fixed; top: 0; left: 0; z-index: 1; width: 100%;
}
/*---------- LAYOUT --------------*/
html, body, #wrappper {
height: 100%;
}
body > #wrapper {
height: auto; min-height: 100%;
}
#main {
position: relative; width: 100%; height: 100%; top: 0; left: 0; z-index: 2;
padding-bottom: 40px; /* must be same height as the footer */
}
#footer {
background: #0C0;
position: relative;
margin-top: -40px; /* negative value of footer height */
height: 40px;
z-index: 3;
clear: both;
}
/* CLEAR FIX*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
* {
margin:0;
padding:0;
}
<!-- SOME CONTENT IN THE MAIN SECTION -->
<!-- main content -->
<!-- contentcontainer -->
<!-- wrapper -->
SOME CONTENT FOR A STICKY FOOTER
<!-- footer -->


You just need to put your background image in the code. See ya!

Jenny, try it without using a <table> for your background image (a simple <div> should suffice).

I have written a web-server application that will resize images on-the-fly (amongst other things). With my Image Director application installed on your web-server your CSS would include a line like this:

background: url(/image_director/image_director.php?src=../images/APlayfulPlanet.png&w=250) no-repeat;


The background image would then be resized to 250 x 250 pixels (assuming a square source image) upon its first request. The resulting, resized image would be cached on the server and then used from then on so as to minimise the footprint of the Image Director application.

You can learn more (and download the application - free) here: Image Director.

Have fun!

Here is the CSS

#header #header-image {
position: absolute;
top: 12px; right: 30px;
width: 294px;
height: 234px;
background: url(../images/APlayfulPlanet.png) no-repeat;
}


The HTML contains a simple DIV

Hope that helps.