innerHTML image background position

Version imprimable

19/11/2009, 14h32
samtheh

innerHTML image background position
Bonjour à tous,

J'ai un formulaire avec en fond une image :
Code:

1 2 3 ... background: transparent url(bcground.jpg) no-repeat bottom right; ...
j'ai une fonction javascript qui me rajoute du texte dans le formulaire fonction de ce que fait l'utilisateur :
Code:

1 2 3 ... document.getElementById(field + '_droite').innerHTML += stringToInsert; ...
Le tout fonctionne parfaitement bien.
Le problème c'est que lorsque du texte est intégré à mon formulaire, celui-ci s'agrandit. Bon jusque la c'est pas un problème, cela parait normal. Et je ne veux pas que cela soit autrement. Par contre la ou ca devient problématique, c'est qu'en s'agrandissant l'image ne convient plus au formulaire, elle devient trop petite. Et cela fait très moche...

J'ai essaye de rajouter une couleur de fond, mais si je fait cela on ne voit plus l'image....

Comment faire ?

Merci de vos retours/réponses.
19/11/2009, 15h44
SpaceFrog

le strech du background n'est pas encore implémenté par les navigateurs...
il parait que ça va venir ...

il va falloir soit mettre l'image en repeat (image raccordable)
ou alors mettre une balise image avec un z-index d'arrière plan et du coup tu pourras en modifier la taille
19/11/2009, 17h15
samtheh

Mais alors comment utiliser la proprietée z-index puisque je n'utilise pas de balise img..... ?

Et que mon image est en background....

Merci de tes eclaircissements sur ce sujet.
19/11/2009, 17h17
SpaceFrog

heu ... ben sans balise image tu peux pas ...
19/11/2009, 21h15
samtheh

Donc du coup cela ne m'aide pas beaucoup....

Comment faire autrement ? Juste positionner l'image dans un coin (bas droit) et mettre un fond tout autour en background, ce n'est pas possible ?

Est-il possible de positionner précisément une balise img par rapport à un autre conteneur (div par exemple) ?

il suffit de positionner le form et l'image dans un même conteneur et jouer du z-index pour que l'image passe derrière le form .
Code:

1 2 3 4 5 6 7 8 9 10 11 <body> <div style="position:relative; top:200px; left:200px;"> <form style="height:200px; width:200px; position:absolute; top:0; left:0;z-index:3"> <input type="text" /> <input type="submit" value="envoyer" /> </form> <img src="img/progressbar.gif" style="height:200px; width:200px;position: absolute; z-index:1; top:0;left:0" /> </div> </body> </html>
voilà l'image positionnée en arrière plan du form, après tu gères ses dimensions comme tu l'entends ...

30/11/2009, 10h03
samtheh
Bonjour,

Je n'ai pas cela comme indiqué au final. Car j'avais plusieurs "sous-partie" dans mon formulaire ou fieldset et du coup cela me semblait moins approprié.

J'ai mis une couleur de fond sur un conteneur global :

Code:

background-color: #FFFFFF;

encadrant mon formulaire et toutes ses sous-parties;

Puis pour chacun de mes sous-parties j'ai mis le style suivant :
Code:

1 2 3 4 5 6 7 8 fieldset { margin: 10px 0 0 0; padding: 0; background: transparent url(fond.gif) no-repeat bottom right; background-z-index: +1; width: 900px; }
Et cela fonctionne très bien sous FF, Chrome et IE (8)