I am trying to find a way to have two background images.

One will repeat and fill the whole page and the other will be centred and not repeat.

The way I have done it so far is to set the background image of the body style so that it repeats and then I created a DIV and centred it and gave it a background image.

This sort of works but if the users browser is smaller than the centred DIV scroll bars appear, even though there isn't really any content to scroll.

Is there a better way of doing this?

Thank you.

Current CSS doesn't support multiple background images (in-development CSS3 does though). I think you're on a good way with your body background and div background image. Maybe try using "div { width: 200px; margin: 20% auto 0; }" (insert your own widths & heights there...)

This is the CSS for the DIV I am using for my second background:

#bg {
    background-image: url(images/logo.gif);    
    width: 800px;
    height: 500px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-250px auto auto -400px;
    text-align:center;
}

I am using margin:-250px auto auto -400px; to center it in the middle of the page.

Do this instead.

body {text-align:center;}

adds the page to be centered, don't remove your body code, just add that line.

#bg {
    background-image: url(images/logo.gif);    
    width: 800px;
    height: 500px;
    margin:0 auto;
    text-align:center;
}

This then centers the div (the margin part)

This - body{text-align: center;} is not necessary, unless you're concerned with IE 5.5 or lower. IE6 now supports the margin:0 auto to center a div.

I do believe your biggest problem is that position:absolute - it's just not a good idea. Learn to use the normal document flow and floats instead.

Is there a better way to center a DIV in the middle in the page than what I am doing now?

Try my method, maybe?

Twice as easy as what you're doing.

You could try using one background picture for the html element, and one for the body element.