Advice with centering images using CSS

Question

I'm struggling to center the graphic I have on my frontpage of my website (the kids and teacher!), is there a better way of doing this? Most displays it's fine, but obviously I need okay for all.

Also I've noticed when the resolution is low (say 800x600) the clouds appear upon the heading, it's as if the browser doesn't like z-index?

The website is:

http://www.huntspillfederation.co.uk/

My code looks like this:

 <style type="text/css">

    .stretch {
        width:100%;
        height:100%;
    }
    .stretchw {
        width:100%;
    }
    #cloud1 {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index:4;
    }
    #cloud1 img {
        max-width: 70%;
        height:auto;
    }
    #cloud2 {
        position: absolute;
        right: 50px;
        top: 50px;
        z-index:5;
    }
    #cloud2 img {
        max-width: 70%;
        height:auto;
    }
    .bottom {
    background-image: url("images/hill3.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    position:absolute;
    bottom:0px;
    left:0px;
    width: 100%;
    height: 263px;
    border: none; 
    overflow-x: hidden;
    z-index:6;
    }
    #kids {
        position: absolute;
        left: 30%;
        bottom: 50px;
        z-index:8;
    }
    #kids img {
        max-width: 100%;
        height:auto;
    }
    body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #666;
    background-color: #67b8ed;
    }
    h1 {
    color: #000;
    font-size: 35px;
    font-family:Palatino Linotype;
    font-style:italic;
    text-align:center;
    }
    .maintable {
        z-index:7;
    }
    table.center {
    margin-left:auto; 
    margin-right:auto;
    z-index:8;
    }
    .auto-style1 {
        width: 8px;
    }
</style>

Any ideas?

Answer 1

You'd need to dynamically increase or decrease the size of the div tag and the corresponding image inside it to fulfill your needs. Take a look at Nathan's answer and have a go at it. Height equal to dynamic width (CSS fluid layout)

Right now, Your left:30% doesn't obviously work for all viewports.

Answer 2

A much (cheat) easier way to solve your problem would be to download the whole background image when it aligns properly.. then use that as the background image for the body tag with width:100% and height:100% :P