Cette technique CSS permet d'adapter automatiquement le fond de la page à la taille de l'écran. peu importe la configuration de l'écran ça fonctionne !
<div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="images/bg.jpg" alt=""/> </td> </tr> </table> </div> </div>
* { margin: 0; padding: 0; } html, body, #bg, #bg table, #bg td { height:100%; width:100%; overflow:hidden; } #bg { position: fixed; } #bg div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; } #bg td { text-align:center; vertical-align:middle; } #bg img { margin:0 auto; min-height:50%; min-width:50%; }
N'hésitez pas à intégrer ce css dans le votre est non dans une nouvelle feuille de style, vous gagnerez en temps de chargement ;-)
ça fait effectivement beaucoup d'élément pour faire fonctionner cette astuce mais il faut avouer que ça en vaut la peine. Le problème c´est que le contenu situé en dessous de la hauteur de l´écran sera complètement coupé sans possibilité de scroller le contenu, l'auteur de l'article original propose donc une technique permettant de remédier á ce problème.
<div id="cont"> <br /> <div class="box"> <br /> <!-- content in here --> <br /> </div> <br /> </div>
#cont { position:absolute; top:0;left:0; z-index:70; overflow:auto; } .box { margin: 0 auto; width: 400px; padding: 50px; background: white; padding-bottom:100px; font: 14px/2.2 Georgia, Serif; }