Discussion :

[Deallyra]

Bonjour,

Voilà, j'ai une image que j'ai mit en fond (background) dans mon div.
Le truc c'est que ce div à une largeur variable selon la largeur de l'écran de l'internaute...

Je voudrais que la largeur de mon image s'y adapte. Non par répeter l'image mais l'étendre...

J'espère avoir été assez claire

[Bisûnûrs]

Il est impossible d'étirer un background en CSS.

Tu peux toujours feinter en mettant directement la balise img pour ton image dans ton div en question, de taille 100% et le texte en position absolue par-dessus.

[E.Bzz]

Bonjour,

Je voudrais que la largeur de mon image s'y adapte. Non par répeter l'image mais l'étendre...

Ca risque de nuire à sa qualité, non ?
Ca dépend de l'image elle-même, mais ne vaudrait-il pas plutôt la prévoir de la taille max que pourra prendre le div, et la "rogner" en-dessous de cette taille ?

A+

[Deallyra]

La rogner? Comment?

Parce que présentement, elle est un peu supérieure en hauteur et dépasse du div...


Et puis, l'image en question est un dégradé en fait...

[E.Bzz]

La rogner? Comment?

Ben si elle est en background d'un div plus petit, elle le sera de fait, non ?

Sinon, vue l'image, avec la solution de Bisunurs, elle ne devrait pas être trop "dégradée", finallement ...

A+

[Deallyra]

position: absolute pour le texte... je fais ça comment? Car tout mon div se casse la figure si je met ça...

[Candygirl]

normalement un position relative suffit si ton image est bien placé avant dans le html

[Bisûnûrs]

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="position:relative;width:300px;height:200px">
   <img src="http://www.google.fr/intl/fr_fr/images/logo.gif" style="width:100%;height:100%" />
   <p style="position:absolute;top:0;left:0">
      Du texte ici
   </p>
</div>

[Deallyra]

Merci beaucoup.
Ca fonctionne

[Candygirl]

Perso je ferais plutôt l'inverse de Bisûnûrs, à savoir mettre l'image en absolute et donner juste un positionnement relatif au texte qu'il passe par-dessus:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="position:relative;width:300px;height:200px"> 
  <img src="http://www.google.fr/intl/fr_fr/images/logo.gif" style="width:100%;height:100%; position:absolute; top:0;left:0;" alt="" />
  <p style="position:relative;">  Du texte ici </p>
</div>

Il me semble, d'une manière générale, plus logique de donner le positionnement absolu à l'image car c'est elle la cause de ce positionnement et il est aussi plus intéressant que le texte reste dans le flux pour le comportement de la page en cas d'agrandissement de police, par exemple (il est bien clair que dans ce cas donner une hauteur au div est aussi une mauvaise idée à moins d'un overflow:auto, par exemple).

Perso, au vu de l'image, j'essaierais plutôt de jouer sur un prolongement avec une couleur de fond plutôt que de mettre dans le html une image sans intérêt.

[Deallyra]

[QUOTE=Candygirl]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="position:relative;width:300px;height:200px"> 
  <img src="http://www.google.fr/intl/fr_fr/images/logo.gif" style="width:100%;height:100%; position:absolute; top:0;left:0;" alt="" />
  <p style="position:relative;">  Du texte ici </p>
</div>

Est-il nécessaire de refaire le position:relative; dans le style du <p>?

[Deallyra]

Désolée...
Dans le cas d'un overflow, ma scrollbar est présente pas de problème mais l'image ne la suis pas.

[Deallyra]

C'est pas grave laissé tomber...
Ca foirre complètement sous IE...

je vais faire autrement... je vais bidouiller...

Merci

[Candygirl]

Est-il nécessaire de refaire le position:relative; dans le style du <p>?

Oui autrement celui-ci se trouvera en-dessous de l'élément positionné en absolu.

[Deallyra]

...So desu ka...

Merci