Accueil > css > fond-plein-ecran

{ La technique du 'full page background' expliquée }

Introduction

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 !

astuces

Le html

<div id="bg">  
<div>     
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/bg.jpg" alt=""/> 
</td>
</tr>
</table>
</div>
</div>

Le css

* {     
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;
}