Image en Background ...

**le Dim Oct 03, 2010 15:52**

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.

**le Dim Oct 03, 2010 15:57**

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:

**le Dim Oct 03, 2010 16:12**

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>

**le Dim Oct 03, 2010 16:30**

Bonsoir,

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

**le Dim Oct 03, 2010 16:36**

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

**le Dim Oct 03, 2010 16:51**

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).

Image en Background ...

Image en Background ...

Re: Image en Background ...

Re: Image en Background ...

Re: Image en Background ...

Re: Image en Background ...

Re: Image en Background ...

Lectures recommandées sur ce thème :

Qui est en ligne