Background image qui ne se répète pas.

Bonjour,

Je veux simplement répéter une image en fond de cellule (td) avec une hauteur qui prend toute la hauteur de cellule (100%) puisque celle-ci varie avec le contenu du site.

J'ai fait ça :

<td style="background-image:url(design/headers/repet_gauche.jpg); background-repeat:repeat-y;" width="50"></td>

Et j'ai aussi essayé en ajoutant height="100%" dans la <td>.
ça ne marche que sous safari, pas sous FireFox ou IE...

Evidemment si je met height="200" dans la td, ça marche mais pas height="100%"... or il me faut une hauteur de cellule variable puisqu'elle s'adapte au contenu de la cellule du milieu qui grandit ou rétrécit.

So what ?

Bonjour oxitan et soit le bienvenu sur le forum Alsacreations !

Comme tu en es à ton premier post, je t'invite à lire la page d'Aide. Tu y trouveras de l'information vitale à la bonne marche de ce forum.
Avant de créer un sujet, il est conseillé d'utiliser la fonction Recherche pour voir si ton problème n'a pas déjà été traité dans un autre sujet.
Le forum met aussi à ta disposition une FAQ et d'excellents Tutoriels en plus de la Doc CSS de Mediabox.
Assure-toi aussi que tu as lu la Méthodologie à lire avant de poster dans ce salon !

Supposons que tu as fait toute cette démarche et que ton problème reste entier, tu peux créer ton propre sujet comme tu viens de le faire avec quelques codes pour illustrer ton problème. Ta page en ligne serait un atout non négligeable pour obtenir de l'aide rapidement. Je ne connais pas ton niveau en HTML/CSS, mais puisque ce forum traite des standards Web et des bonnes pratiques dans la conception Web aux normes, mon instinct me dit qu'on va te suggérer de lire : En quoi la mise en page par tableaux est-elle stupide : problématique définie, solutions offertes. Alors, autant gagner du temps !

Si tu en as envie, n'hésiter pas à faire un détour par Le Bar du forum où tu y trouveras « Le post des présentations » en « post-it » en haut de la page.

Bonjour Stephan

J'ai essayé il y a plusieurs mois de me mettre à la mise en page sans tableaux, et j'ai galéré comme c'est pas possible, alors je suis revenu à ces bons vieux tableaux lourds mais efficaces et rapides à construire... je sais, ça doit en faire rire beaucoup ici.
Quand je vois que les CSS merdent toujours avec tel ou tel navigateur... c'est pas normal, IE devrait déjà être rayé de la carte...

J'utilise néanmoins les css pour tout le reste sur un site, et là, cette image ne veux pas se répéter dans cette cellule avec feuille de style.

Un coup de main serait le bienvenue.

le sujet a déja été abordé; le css dans l'état actuel des choses ne peut pas redimensionner une image. 'height' est relatif à la hauteur de l'élément et n'a rien à voir avec l'image de fond.

brice a écrit :
le sujet a déja été abordé; le css dans l'état actuel des choses ne peut pas redimensionner une image. 'height' est relatif à la hauteur de l'élément et n'a rien à voir avec l'image de fond.

Salut,

Je ne souhaite pas redimensionner une image mais la répéter en hauteur, autant que nécessaire, d'où le %.

Avec le code que tu indiques (et sans ajouter de height en effet hors propos), l'image d'arrière-plan est répétée verticalement comme tu sembles le vouloir.
Le problème doit venir d'ailleurs

Merci de vos réponses.

Voici le code.

<table cellpadding="0" cellspacing="0" width="400">

	<tr>
		<td valign="top"><img src="design/headers/bord_gauche.jpg" width="50" height="495" alt=""></td>
		
		<td rowspan="2" valign="top">
		
			<table width="400" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">

			<tr><td>
	
			dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>
			dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>
			dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>	dqsdq <br>
				
			</td></tr>
		
			</table>
		
		</td>
		
		<td valign="top"><img src="design/headers/bord_droit.jpg" width="20" height="495" alt=""></td>
		
	</tr>
	
	<tr>
		<td style="background-image:url(design/headers/repet_gauche.jpg); background-repeat:repeat-y; background-position:top;" width="50"></td>
		<td style="background-image:url(design/headers/repet_droit.jpg); background-repeat:repeat-y;" width="20"></td>
	</tr>

</table>

Désolé pour le tableau...
Il est clair que le problème vient du rowspan... sans lui la cellule se répète or je ne peux pas m'en passer, voire l'image jointe. On voit bien que le background est juste en bas et qu'il joint pas la ligne du dessus.

http://denicat.free.fr/pb.jpg

a écrit :
Et j'ai aussi essayé en ajoutant height="100%" dans la <td>.
ça ne marche que sous safari, pas sous FireFox ou IE...

J'ai la même problème, mais height="100%" marche sous Firefox et IE, mais pas sous Safari. Voici le CSS:

.separatorVert {
	background-image: url("http://www.lulu.com/themes/common/images/dashedline_vertical.gif");
	background-repeat: repeat-y;
	width: 4px;
	padding: 0px 0px 1px 0px;
	height: 100%;
	position: relative;
}

Et le code:

<table border="0" width="750" cellpadding="0" cellspacing="3">
  <tr>
    <td>
<!--1st box-->			
This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. This is filler text. 
    </td>
    <td height="100%" rowspan="2">
      <div class="separatorVert"></div></td>
  </tr>
</table>

Comme j'ai dit, l'image "dashedline_vertical.gif" répéte en hauteur avec Firefox et IE, mais on le voit une fois avec Safari.

Désolée, ignorez le rowspan dans le 2eme td. (Ce n'est pas le problème.)

[ Bonjour pokey ! Ce sujet appartenant à oxitan, ce n'est certe pas le bon endroit pour exposer ton problème. Après avoir lu Aide/Règles puis la FAQ, tu peux utiliser l'outil Recherche pour voir si ton problème n'a pas déjà été traité. Si suite à ces démarches ton problème reste entier, tu peux ouvrir ton propre sujet et solliciter l'aide des membres. ]

Merci de ta compréhension !

--
Stephan
Modifié par Stephan (04 Mar 2005 - 21:49)