Multiple background images

hi I want to setup up a site using xhtml and css and want it so i have an image positioned at the top left with no-repeat and an image positioned at the top right with no-rpeat again and then finnaly a repeater image to fill in the gap between the left and right image?

I had the css like this:
body {
background: url(left.gif) top left no-repeat;
}
div.right {
background: url(right.gif) top right no-repeat;
}
div.repeater {
background: url(repeater.gif) repeat-x;
}

with the accompaning html like so:

<body>
<div class=“right”>
<div class=“repeater”></div>
</div>
</body>

Your help will be greatly appreciated

Cheers,
Inept