Centrer et redimensionner un background en css
Classé dans : Programmation
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.
Livres css
- Permalien
- maniT4c
- 19 fév 2010 1:30
- Commentaires (9)
le 6 janvier 2011 à 17:41
Salut,
Merci pour ce code qui est vraiment sympa. Par contre, j’ai un petit souci lorsque j’ouvre la démo sur Safari! L’image s’agandit sans souci mais un moment donné on voit les limites de l’image en haut et en bas. C’est un peu embétant dans mon cas. Existe-t’il une solution à ce problème? Merci d’avance
Lorraine
le 19 janvier 2011 à 10:29
Salut,
Merci pour l’astuce, ça marche nikel.
Cependant, j’ai un p’ti soucis ; le reste de ma page n’est pas superposé à l’image en background mais s’affiche en dessous de mon image !?
Une idée ?
Amicalement,
le 8 février 2011 à 19:28
Hello,
Ca marche super, merci!
Mais je n’arrive plus à obtenir une barre de défilement sur mon site
Si tu as une idée…
le 3 avril 2011 à 14:01
le script est super mais dommage qu’il ne redimenssione pas le background quand on change la taille de la fenêtre
le 12 mai 2011 à 16:52
hey,
Deja merci pour le script, j’aimerai savoir si il y avait possibilité d’y ajouter d’autre images, je m’explique : que l’image de fond soit differente a la reactualisation de la page ou change toute les 30sec. L’ensemble etant bien sur redimensionnable etc
Merci de votre reponse !
le 13 mai 2011 à 7:48
@Mask, c’est tout à fait possible bien sûr. Après tout dépend de ce que tu souhaite faire et du résultat à obtenir.
Tu peux par exemple utiliser du javascript pour faire tourner les images en boucle toutes les trentes secondes.
Ou définir qu’elle sera l’image affiché au chargement de la page avec un petit script php.
Mais dans tous les cas ce n’est pas en HTML ni en CSS que tu pourra faire cela.
Il faudra soit du javascript soit du php, ou encore du flash comme je l’ai fait pour ce site: http://www.roulottes-de-normandie.com
le 15 juin 2011 à 18:43
@maniT4c
oh ! Quel malpoli je fais, je découvre cette réponse 1 mois plus tard ! Bon et bien je ne suis pas du tout calé en js/php oui je veux exactement faire ce que tu as fais sur roulotte-de-normandie !
Je vais voir pour faire ça en flash et l’incorporer dans mon site html ! En tout cas merci encore !
le 20 juin 2011 à 18:28
Finalement j’y suis parvenu grâce à cet article et au php ici :
http://www.allhtml.com/articles/detail/255
Si ça peut aider !
le 20 juin 2011 à 18:50
Content que tu soit parvenu à faire ce que tu voulais @Mask et merci pour l’url ça servira en effet à d’autres.