mettre une image de fond dans un message html

[lauraestate]

Bonsoir

je fais appel à vous ce soir car je suis un peu dans l'impasse.. Je m'y connais pas mal en CSS mais en HTML je suis un peu limitée. Il se trouve que sur mon forum j'ai des fiches de personnages que mon ancienne designer m'avait fait.. que en html. J'aimerai aujourd'hui garder la mise en forme de ces fiches mais y ajouter un fond pour les personnaliser un peu.. j'ai essayer des choses style background image etc mais sans résultat..

Quelqu'un pourrait-il me dire quelle code insérer dans ces fichus tableaux pour ajouter un fond ?

les fiches types :

Code:

<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px"><table style="width: 97%; border:2px solid #D1896D; -moz-border-radius:20px">   <tr><td><center><table style="border-collapse:collapse;"><tr><td>[size=18][b]Ysanthem Kreisker[/b][/size]

[img]http://i10.servimg.com/u/f10/12/50/45/89/ysanth11.jpg[/img]</td></tr></table>
[spoiler][img]http://i10.servimg.com/u/f10/12/50/45/89/ysanth12.jpg[/img][/spoiler]</center>
[table width=100%][tr][td width=33%][b]Nom [/b]» Ysanthem Kreisker
[b]Age [/b]» 6 ans
[b]Sexe [/b]» Hongre
[b]Race [/b]» Poney Français S
[b]Taille [/b]» 1m48 au garrot

[b]Prix [/b]» 10 000€
[b]Niveau exigé [/b]» Galop 5
[b]Demi-pension [/b]» Aucune
[b]Propriétaire [/b]» Seventh' Heaven[/td][td width=66%][justify][u][b]Caractère[/b][/u]
Ysanthem est un poney qui collectionne les bétises ; qu'elles soient volontaires.. ou pas ! Ce qui est sur, c'est qu'il vous énervera à un moment ou à un autre ! Ysanthem adore attirer l'attention, et pour lui, cela passe essentiellement par l'actif. Fugitif des paddocks comme des boxs, ce poney on ne peux plus malin considère qu'il est son seul maître et qu'il fait ce qu'il veut quand il veut où il veut.. Oui ca ne sera pa tous les jours facils. Il ne faudra simplement pas vous décourager. Ysanthem, une fois lassé, devient un adorable poney. Certes il continuera ses farces, mais si vous lui imposez le respect et des règles, il finira par vous écouter. Au travail il en est de même. Restez sur vos gardes les premières fois où vous le montrez, car il vous fera forcément un mauvais tours. Montrez lui la loi du plus fort, surtout par l'esprit, et vous verrez, qu'il comprendra tout beaucoup plus vite ![/justify][/td][/tr][/table]
<div style="background:#927F60; width: 100%;">[size=1]...[/size]</div></td></tr><tr><td>[table width=100%][tr][td width=33%][b]Santé [/b]» 90%
[b]Moral [/b]» 90%
[b]Confiance [/b]» 40%[/td][td width=66%][table][tr][td][b][u]Cross[/u][/b][/td][td]Vitesse
25%[/td][td]Franchise
20%[/td][td]Endurance
40%[/td][td][b][u]Total[/u]
28.5%[/b][/td][/tr][tr][td][b][u]Saut d'obstacle[/u][/b][/td][td]Respect des barres
15%[/td][td]Souplesse
28%[/td][td]Maniabilité
38%[/td][td][b][u]Total[/u]
27%[/b][/td][/tr][tr][td][b][u]Dressage[/u][/b][/td][td]Légèreté
42%[/td][td]Soumission
43%[/td][td]Décontraction
20%[/td][td][b][u]Total[/u]
35%[/b][/td][/tr][/table][/td][/tr][/table]
<div style="background:#927F60; width: 100%;">[size=1]...[/size]</div></td></tr><tr><td>[table][tr][td][center][b]Dentiste[/b] [/center][/td][td][center][b]Vétérinaire[/b] [/center][/td][td][center][b]Ostéopathe[/b][/center][/td][td][center][b]Chuchoteur[/b] [/center][/td][td][center][b]Maréchal[/b][/center][/td][/tr][tr][td][center]Dernière visite 21/03/11[/center][/td][td][center]Dernière visite 28/03/11 [/center][/td][td][center]Dernière visite 01/12/10 [/center][/td][td][center]Dernière visite le 05/05/10 [/center][/td][td][center]Dernière visite 01/12/10 [/center][/td][/tr][tr][td] [center]Prochaine visite 21/07/11[/center]
[/td][td][center]Prochaine visite 28/05/11 [/center][/td][td][center]Prochaine visite 01/05/11[/center][/td][td][/td][td][center]Prochaine visite le  11/03/11 [/center][/td][/tr][/table]
<div style="background:#927F60; width: 100%;">[size=1]...[/size]</div></td></tr><tr><td>[table width=100%][tr][td width=33%]
[b]Cross [/b]» ...
[b]Obstacle [/b]» ...
[b]Dressage [/b]» ...

[b]Total des gains[/b]» ...[/td][td width=66%]<div style="width:100%;height:100px;overflow:auto;">[u][b]Palmarès[/b][/u]</div>[/td][/tr][/table]</td></tr></table></BLOCKQUOTE>

Le fond test que je voulais mettre : https://i.servimg.com/u/f29/11/69/76/09/fdfdh11.jpg

Merci d'avance =)

[Gorgorbey]

Bonjour,

Il suffit de créer une class dans le CSS et de l'appliquer au HTML.
Dans le CSS :

Code:

.fond
{
background-image:URL("http://i29.servimg.com/u/f29/11/69/76/09/fdfdh11.jpg");
}

En dans le HTML :

Code:

<div class="fond">Contenu</div>

Amicalement.

[lauraestate]

Je comprend bien le système, mais le probleme est tel que l'image de fond ne recouvre pas la totalité du tableau. Il separer les catégories.. Bon je vais essayer de bidouiller un peu et je vous redit =)

[Gorgorbey]

Il suffit de jouer avec height et width dans le CSS pour la taille

[lauraestate]

hmm ca n'est pas de mon niveau je crois =)

[Gorgorbey]

Mais si^^

Code:

.fond
{
background-image:URL("http://i29.servimg.com/u/f29/11/69/76/09/fdfdh11.jpg");
width:100%;
height:100%;
}

[Fabien B.]

Normalement pas besoin de rajouter une div... suffit de rajouter l'image de fond dans le tableau. Pour ça deux façons de faire :
- dans la ligne html suivante rajouter background dans le style (css) du tableau (cf texte en rouge)

<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px"><table style="width: 97%; border:2px solid #D1896D; -moz-border-radius:20px; background-image:URL("https://i.servimg.com/u/f29/11/69/76/09/fdfdh11.jpg"); ">

- Ou on peut rajouter une ID (un élément de style css attaché a un objet unique, contrairement aux classes qui sont attachées à plusieurs éléments). Ce qui donnerait :

<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px"><table id="font" style="width: 97%; border:2px solid #D1896D; -moz-border-radius:20px;">

et dans le css, on reprend la ligne CSS, mais en remplaçant le point devant "fond", par un #

#fond {
background-image:URL("https://i.servimg.com/u/f29/11/69/76/09/fdfdh11.jpg");
width:100%;
height:100%;
}

Pour qu'une image s'adapte parfaitement a un fond, soit on peut donner des dimensions fixe, au tableau ou a la boite qu'on crée, et donner les mêmes dimensions à l'image de fond que l'on utilisera. soit, si le tableau n'a pas une taille fixe (à cause du texte qu'il contient notamment), utiliser une fonction CSS : "cover" ... suffit alors de rajouter dans le CSS :

background-size: cover;
-moz-background-size: cover; (pour firefox)

Vous pouvez trouver de nombreux tutoriels sur le net à propos du CSS et de ses propriétés. Pour les fonds, faites la recherche "CSS background propriétés"

[lauraestate]

merci ca marche niquel !