Toutes les clefs pour réussir dans le e-commerce

Mes modules Prestashop

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.

Module Prestashop pour votre image de fond

Si vous utilisez Prestashop, pour vous simplifier la vie j’ai créé un module qui va vous permettre de rajouter vos fond d’écrans sur votre boutique en quelques minutes.

**** CLIQUEZ ICI POUR VOIR LE MODULE FOND D’ECRAN ****

Poster un Commentaire

19 Commentaires sur "Centrer et redimensionner un background en css"

Recevoir un email pour
avatar
Trier par:   plus récent | plus vieux | Plus de vote
Lorraine
Invité
Lorraine

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

Cyrille
Invité
Cyrille

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,

Fabian
Invité
Fabian

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…

pieter
Invité

le script est super mais dommage qu’il ne redimenssione pas le background quand on change la taille de la fenêtre

Mask
Invité
Mask

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 !

Mask
Invité
Mask

@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 !

Mask
Invité
Mask

Finalement j’y suis parvenu grâce à cet article et au php ici :
http://www.allhtml.com/articles/detail/255
Si ça peut aider !

moe
Invité
moe

Salut,
d’abord merci pour le code qui m’est d’une aide précieuse!
Pourrait tu détailler le css suivant


z-index:-200;/* pour qu'il soit toujours en dessous du reste du site*/

Car je souhaite ajouter au fond des zones cliquables () sur cette image et les liens ne sont cliquable quand je commente cette ligne…

A bientôt!

Soliiiid
Invité
Soliiiid

Bonjour,

J’ai le même problème que Moe, en gros si on met un href associé à un z-index, on ne peut plus cliquer sur le lien.

Sinon, merci beaucoup pour l’astuce du background mais j’ai un petit soucis, je n’ai plus l’ascenseur sur mon site, du coup il n’y a aucun moyen de descendre/monter dans la page :/. Y’a t-il une solution a ce problème ?

Merci !

Soliiiid
Invité
Soliiiid

Bonjour,

Merci beaucoup pour vos réponses maniT4c.

Yvanoph
Invité
Yvanoph

Bonjour, Bonsoir,
tombé sur ce billet au cours d’une recherche pour recalculer automatiquement une image placée en “background” à la taille d’une sans passer par une balise , j’avoue que l’astuce est intéressante puisque sans passer par JavaScript, et donc bien plus légère et rapide ?
Enfin, hors le fait de modifier le “height:100%;” qui supprime bien évidemment l’ascenseur, et dans ce cas laisser courir de façon aléatoire l’image en bas avec une “position:fixed;top:0;” ?
Bref, ce que je n’aime pas par contre est le titre, passablement faux, puisque en fait cela nous fait un fond qui couvre la totalité de la fenêtre visible du Navigateur (donc une fois diminué des barres de titre, navigation, ascenseur etc.), et NON de l’écran ! ! !
Peut-être me trouverez vous pointilleux, mais quant à programmer, autant utiliser les bons termes comme les bonnes valeurs, alors quant à s’exprimer, autant en faire autant ? (Sourire)
Bien cordialement, Yvanoph—

Bob1877
Invité
Bob1877

Bonjour,

Super astuce que je souhaiterai empruntée.
Je suis en train de développer un site avec joomla 2.5.
Je crée mon template perso (html+css).
J’ai insérer le code dans body du fichier index.php et dans template.css mais cela ne fonctionne pas.
Je cherche de mon côté mais si quelqu’un a une idée je suis preneur.

D’avance merci.

adrien
Invité
adrien

merci pour ce code qui répond au doigt et au l’oeil !

wpDiscuz