Javascript adentro de CSS

[Mariianooh]

Hola, necesito su ayuda. Mi problema es el siguiente, quiero que el banner (imagen de cabecera) de mi blog cambie segun el horario, dividiendolo en 3 franjas horarias, para eso arme un codigo en javascript, lo probe y funciona perfecto, pero el problema surge al ponerlo donde va el link en el codigo CSS de la cabecera, ya que este no funciona, asi que les pregunto, es posible hacer lo que planteo? Aqui les dejo los codigos:

Codigo javascript:

Código:

<script>
//<![CDATA[
var hoy = new Date(), 
    hora = hoy.getHours(); 

if (hora >= 7 &amp;&amp; hora <= 14) { 
    document.write('<img src="http://i.imgur.com/7C736.png" />'); 
} 
else if (hora >= 14 &amp;&amp; hora <= 20) { 
    document.write('<img src="http://i.imgur.com/y61nh.png" />'); 
}
else if (hora >= 20 &amp;&amp; hora <= 7) { 
    document.write('<img src="http://i.imgur.com/uFaCc.png" />'); 
}
//]]>
</script>

Codigo CSS del blog sin modificar:

Código:

#body-wrapper{margin:0px;padding:0px;background:url(http://i.imgur.com/iTn7Z.png) left top repeat-x;}

Y asi es como yo lo deje y no funcionó:

Código:

#body-wrapper{margin:0px;padding:0px;background:url(<script>
//<![CDATA[
var hoy = new Date(), 
    hora = hoy.getHours(); 

if (hora >= 7 &amp;&amp; hora <= 14) { 
    document.write('<img src="http://i.imgur.com/7C736.png" />'); 
} 
else if (hora >= 14 &amp;&amp; hora <= 20) { 
    document.write('<img src="http://i.imgur.com/y61nh.png" />'); 
}
else if (hora >= 20 &amp;&amp; hora <= 7) { 
    document.write('<img src="http://i.imgur.com/uFaCc.png" />'); 
}
//]]>
</script>) left top repeat-x;}

Desde ya, gracias!