positionner 2 images de background

[JoP]

Bonjour,

je voudrais savoir si c'est possible de position 2 images en background dans une meme cellule;

ce que je veux faire: -Avoir un BG pour l'extrême gauche de la cellule

-Avoir un BG pour l'extrême droite de la cellule

merci d'avance a tout le monde

Modifié 17 Septembre 2006 par JoP

[ZepX3]

J'en n'ai aucune idée, mais ce que tu peux faire c'est mettre les deux images ensembles pour former un seul et même membre

[JoP]

Merci

mais je ne veux pas coller les images, car en redimensionnant le navigateur; plus rien ne va fonctionner

[birdyman]

Salut,

Tu peux spécifier uniquement une image de fond, par contre avec les css

tu peux placer une boite par dessus avec elle aussi une image de fond.

Suivant comment tu places la boite tu peux obtenir l'effet voulu.

[ZepX3]

Merci

mais je ne veux pas coller les images, car en redimensionnant le navigateur; plus rien ne va fonctionner

Moi je parle par de coller les deux ensembles avec Photoshop par exemple

Modifié 17 Septembre 2006 par ZepX3

[aymericj]

Techniquement, je ne crois pas qu'il soit possible d'avoir 2 images différentes en background d'un même élément.

Mais tu devrais pouvoir jouer sur la pluralité des éléments.

Je m'explique,

Tu vas attribuer un premier fond image à ta cellule, que tu vas caller à droite.

Exemple de code : Tableau d'exemple & ligne 3 colonnes

 

code HTML :
<table>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
</table>

Habillage CSS :
td { background: transparent url(chemin vers mon images) no-repeat top right;}

Via ce css, tu precise que ta cellule a un fond couleur transparent, un fond image qui ne se repete pas, callé en haut et à droite de ta cellule.

Ensuite, on va "tricher" pour la deuxieme image de fond, on va l'attribuer au contenu de ta cellule.

pour l'exemple je vais utiliser une balise neutre de type "span" en lui attribuant une classe de façon à la diférencier des autres balises span que tu pourrais utiliser dans ta page.

Ce qui nous donne le code suivant : toujours un tableau une ligne et 3 colonnes

 

code HTML :
<table>
  <tr>
	<td><span class="fondcelG">mon texte</span></td>
	<td><span class="fondcelG">mon texte</span></td>
	<td><span class="fondcelG">mon texte</span></td>
  </tr>
</table>

Habillage CSS :
td { background: transparent url(chemin vers mon images) no-repeat top right;}

.fondcelG { background: transparent url(chemin vers mon images) no-repeat top left;}

Normalement tu te retrouve avec les 2 images de fond qui s'éloignent ou se rapprochent en fonction de la largeur de ta cellule.

Attention toutefois, ne connaissant pas le type de contenus que tu as prévu pour tes cellules, je n'ai utilisé la balise "span" qu'a titre d'exemple, celli ci à des comportement particuliers qui peuvent necessiter des réglages précis au niveaau de ton css, particulièrement si tes cellules on des marges interieurs.

Et dernière précision : je ne suis pas un pro de l'habillage des tableaux via css

++

Aymeric

[JoP]

Et dernière précision : je ne suis pas un pro de l'habillage des tableaux via css

merci,

tu n'est peut-etre pas un pro, mais j'ai quand meme réussi a faire ce que je voulais faire en m'inspirant du code que tu m'a fourni... excepté que j'ai changé <span> par <div>...

merci encore

CITATION(JoP @ dimanche 17 septembre 2006, 18h42) *

Merci

mais je ne veux pas coller les images, car en redimensionnant le navigateur; plus rien ne va fonctionner

Moi je parle par de coller les deux ensembles avec Photoshop par exemple

peux-tu m'expliquer s'il te plaît....