Hola a todos, tengo una duda, tengo este codigo que carga una pagina html en un div, va todo perfecto, pero tengo una foto como fondo en el body y quiero que cada vez que cargue el contenido html cambie, pero no se me ocurre como, me podeis ayudar, gracias.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX - Cargar páginas con AJAX</title>

<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;

try {

xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {

try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {

try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}




function Enviar(_pagina,capa) {
var ajax;
ajax = ajaxFunction();
ajax.open("POST", _pagina, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.onreadystatechange = function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = " Aguarde por favor...";
}
if (ajax.readyState == 4) {

document.getElementById(capa).innerHTML=ajax.responseText;
}}

ajax.send(null);
}
</script>


<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>

<body class="body" >

<nav class="nav">
<ul class="ul">
<li class="li"><a href="javascript:Enviar('bio.html','contenido')" title="Mi Biografía">Bio</a></li>
</ul>
</nav>



<br />

<div id="contenido" class="contenido">
</div>



</body>
</html>
-----------

css
-----------
@charset "utf-8";



a{
color: #FFF;
text-decoration: none;
vertical-align: middle;
}

a:hover{
text-decoration: underline;
display: block;

}

.body{
font: 14px Arial, Helvetica, sans-serif;
margin: 0;
background-image: url(../fotos/campo_ok.jpg);
}

.contenido{
width: 950px;
border: 1px solid #900;
}
.enlaces{
float: left;
height: 100%;
width: 100%;
}

.nav{
width: 100%; /* Anchura del menú */
height: 100px;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;

}
.ul{
width: 750px; /* Anchura del menú */
height: 80px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-style: normal;
list-style-type: none;
display: inline-block;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}

.li{
float: left;
margin: 20px;
}


.li:hover{
background-color: #CCCCCC;
}