Code HTML/CSS pour afficher une image de fond proportionnée

J'ai trouvé cette solution sur css-tricks.com, qui propose d'ailleurs maintenant une solution toute simple en CSS3 (mais qui ne me permettrait pas de faire les transitions en mode diaporama).

Partie HTML, à mettre en fin de page, deux balises div et une table unicellulaire contenant l'image :

<div id="bg">
 <div>
  <table cellpadding="0" cellspacing="0">
   <tbody><tr><td>
    <img alt="" src="votreimage"/>
   </td></tr></tbody>
  </table>
 </div>
</div>

Partie CSS (pour une image centrée) :

html,body {
    width:100%;height:100%;
    margin:0px;padding:0px;
}
#bg, #bg table, #bg td {
    height:100%;width:100%;
    overflow:hidden;
}
#bg {position: absolute;} /* or fixed */
#bg div {
    position:absolute;
    top:-50%;left:-50%;height:200%;width:200%;
}
#bg td {text-align:center;vertical-align:middle;}
#bg img {min-height:50%;min-width:50%;}

Il faut ensuite positionner le contenu de votre site en absolu par dessus la balise #bg, avec un z-index supérieur.

Notez qu'en utilisant YACS et le thème Fullscreen, vous aurez beaucoup d'autres fonctionnalités comme :

• attribuer un fond différent à une page du site ;
• attribuer un fond différent à une branche du site ;
• aligner les images au centre ou suivant une bordure ;
• attribuer une légende aux images ;
• faire défiler une série d'images en diaporama.