figured i'd test it to make sure it works, it does (i did background-color instead of background-image though since i'm not going to make a bunch of test images for the sake of making sure it works).
Code:
<html>
<head>
<style type="text/css">
.background-switch{
position:absolute;
top:0;
left:0;
z-index:3;
width:100%;
height:100%;
background-color:cyan;
}
.wrapper{
position:absolute;
top:0;
left:50%;
z-index:6;
margin-left:-480px;
width:960px;
background-color:magenta;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var images = ['red', 'black', 'yellow'];
function setImage() {
return images[Math.floor(Math.random() * images.length)];
}
$(document).ready(function() {
$('.background-switch').click(function() {
$(this).css("background-color",setImage());
});
});
</script>
</head>
<body>
<div class="background-switch"></div>
<div class="wrapper">rest of website goes here</div>
</body>
</html>