innerHTML image background position

**samtheh** · 19/11/2009, 15h32

Bonjour à tous,

J'ai un formulaire avec en fond une image :

Code :

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

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 :

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

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.

**SpaceFrog** · 19/11/2009, 16h44

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

**samtheh** · 19/11/2009, 18h15

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.

**SpaceFrog** · 19/11/2009, 18h17

heu ... ben sans balise image tu peux pas ...

**samtheh** · 19/11/2009, 22h15

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

**SpaceFrog** · 20/11/2009, 09h33

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 :

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

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

**samtheh** · 30/11/2009, 11h03

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 :

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

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 :

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

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)

innerHTML image background position

JavaScript

Discussions similaires

Partager

Partager