Centrer et redimensionner un background en css

Nous allons voir ici comment, avec un peu d’HTML et de CSS on peut placer une image en fond de site de manière à ce qu’elle prenne toute la taille de l’écran et soit centrée horizontalement ET verticalement.

1. La première étape est de trouver une belle photo d’assez grande dimension.

2. Ensuite il faut créer un DIVavec un identifiant (ici « bg ») et mettre dedans un tableau d’une seule ligne et d’une seule colonne qui contiendra notre image. Voici le code HTML que cela donne:


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

3. Enfin il faut appliquer les css. C’est là que tout se joue.


<style>
html, body, #bg, #bg table, #bg td {
height:100%;
overflow:hidden;
width:100%;
}
#bg {
height:200%;/*le div bg doit être deux fois plus grand que la taille de l'écran*/
width:200%;
left:-50%;/*on le décale de la moitié de la taille de l'écran en haut et à gauche*/
top:-50%;
position:absolute;
z-index:-200;/* pour qu'il soit toujours en dessous du reste du site*/
}
#bg td {
text-align:center; /* permet de centrer horizontalement l'image */
vertical-align:middle; /* permet de centrer verticalement l'image */
}
#bg img {
min-height:50%; /* l'image fera 50% de 200% de la taille de l'écran soit 100% */
min-width:50%; /* l'image fera 50% de 200% de la taille de l'écran soit 100% */
}
</style>

Si vous voulez voir ce que cela donne voici une démo.
Amusez-vous à redimensionner votre navigateur pour voir ce que cela donne.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *