JavaScript CSS help?

[wxdqz]

<style>
body {
background-color: #000000;
background-repeat: no-repeat;
background-position: 3px 1px;
background-image: url(bg.gif);
}
</style>
<script language="JavaScript">
<!--
var actualWidth = window.screen.width;
var actualHeight = window.screen.height;
var backgroundStyle = document.style.bodyBackground;
if (actualWidth >= 1024 && actualHeight >= 768)
{
backgroundStyle = 'bluebg.gif';
}
//-->
</script>
</head>

this is part of the head of a .htm file and the aim is for the document to change the background image if the resolution is equal to or higher than 1024x768. Problem is, it doesn't.. Am i referencing the style object correctly?
Any help appreciated