Image en Background ...

jer_ref · 3 Octobre 2010

Bonjour,

Je souhaiterais mettre en haut d'une page une image en background sur 100% de large et 150 de haut.
Je n'ai pas trouvé la solution en utilisant les CSS, ni en mettant l'image au fonds d'un tableau (je n'ai pas réussi à étirer l'image sur toute la largeur du tableau).

Merci d'avance si vous pouviez m'aider à résoudre mon pb.

J.

Schwarzer Stern · 3 Octobre 2010

Salut,
En CSS pur, à ma connaissance ce n'est pas possible d'étirer une image de background comme une <img />.
Si tu ne peux pas utiliser un attribut "background-repeat", et que tu as absolument besoin de cet étirement, il faudra passer par un JS qui détectera la largeur du bloc concerné, pour ensuite appeler l'image correspondante à cette largeur (tu devras donc créer autant d'images différentes que de largeurs "standards" possibles).
à+

edit : je viens de tomber sur ça, http://www.webbricks.org/bricks/bgMax/, peut être utile dans ton cas :mrgreen:

jer_ref · 3 Octobre 2010

Merci pour votre réponse.

Je viens finalement de trouver une autre solution qui fonctionne :

...
<body>

<img style="position:absolute;left:0px;top:0px;width:100%;height:150px;" src="image.jpg" alt=""/>

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">
contenu de la page .....
</div>

</body>

franckM · 3 Octobre 2010

Bonsoir,

oui mais ce que tu fais là ce n'est pas une image de "fond" (background) mais une image en premier plan.

jer_ref · 3 Octobre 2010

Ca permet pourtant bien de mettre l'image en arrière plan....

Schwarzer Stern · 3 Octobre 2010

Même si c'est le cas c'est pas très catholique, m'enfin...
Par contre, je te conseille de placer l'image en fin de page et de jouer sur le z-index si possible pour éviter que son chargement ne ralentisse celui du contenu de ton site (c'est un détail qui peut avoir son importance).