Image de fond "background" qui ne s'étire pas [html]

damien · 26-02-2010 21:17:21

Bonsoir,

Je cherche à savoir comment étirer l'image de fond sur mon site.
Une image qui prenne toute la taille de l'écran.
Voici le code

<body style="color: black; background-color: rgb(72, 123, 165); background-image: url(images_site/spiralek-cdv5.jpg);" alink="black" link="black" vlink="black"><div style="text-align: center;"><span style="font-family: LMMathItalic10;"></span>

<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">

  <tbody>

width: 100% -> pour moi tout est ok
Sauf que non
Quand je passe sur un écran 1600x1280, l'image se multiplie.
Pour vérifier, faites un zoom arrière sur mon site, vous constaterez le problème.

Du coup j'ai créé une image avec une résolution de 1600x1280, mais ce n'est pas une solution.

Je n'y comprends pas grand chose en code html

Aidez-moi SVP

zodar · 26-02-2010 21:33:04

Salut,

Pour ton css :
background-repeat:no-repeat; // elle ne se multipliera plus

Maintenant ton image :
En effet, 1600x1280 n'est pas une solution.Mais étirer ton image non plus.
Une image en 1024*768 par exemple. Si tu la fait s'étirer sur un écran beaucoup plus grand elle va perdre en qualité.
Beaucoup trichent sur ce coup. On crée une image avec une dimension X et par dessous une couleur de background de la page html identique au fond de l'image.. ainsi on a l'impression que l'image remplit la page.

Maintenant si vraiment tu veux étirer l'image, le background-image ne pouvant se répéter, il ne s'étire donc pas. La seule solution est de mettre ton image dans une balise img en position absolue.

Ex :

html :
<img id="bg" src="mon image.jpg" alt="" />

css :
img#bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

A toi de voir ..

Dernière modification par zodar (26-02-2010 21:34:17)

Debian-facile

#1 26-02-2010 21:17:21

Image de fond "background" qui ne s'étire pas [html]

#2 26-02-2010 21:33:04

Re : Image de fond "background" qui ne s'étire pas [html]

Pied de page des forums