mettre une image de fond dans un message html

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu mettre une image de fond dans un message html

Message par lauraestate le Lun 23 Mai 2011 - 20:44

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://i29.servimg.com/u/f29/11/69/76/09/fdfdh11.jpg

Merci d'avance =)


Dernière édition par lauraestate le Mer 25 Mai 2011 - 21:31, édité 1 fois

lauraestate
**

Messages : 91
Inscrit(e) le : 18/12/2010

http://www.seventh-heaven-stables.com/
lauraestate a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: mettre une image de fond dans un message html

Message par Gorgorbey le Lun 23 Mai 2011 - 20:53

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.

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre une image de fond dans un message html

Message par lauraestate le Lun 23 Mai 2011 - 21:08

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

lauraestate
**

Messages : 91
Inscrit(e) le : 18/12/2010

http://www.seventh-heaven-stables.com/
lauraestate a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre une image de fond dans un message html

Message par Gorgorbey le Lun 23 Mai 2011 - 21:11

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

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre une image de fond dans un message html

Message par lauraestate le Lun 23 Mai 2011 - 21:24

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

lauraestate
**

Messages : 91
Inscrit(e) le : 18/12/2010

http://www.seventh-heaven-stables.com/
lauraestate a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre une image de fond dans un message html

Message par Gorgorbey le Lun 23 Mai 2011 - 21:30

Mais si^^

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

Gorgorbey
+ Hyperactif +

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

http://w4rx.forumactif.com/
Gorgorbey a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre une image de fond dans un message html

Message par Fabien B. le Mar 24 Mai 2011 - 11:38

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://i29.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://i29.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"

Fabien B.
***

Masculin
Messages : 159
Inscrit(e) le : 14/06/2009

http://www.meauxleforum.fr
Fabien B. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre une image de fond dans un message html

Message par lauraestate le Mer 25 Mai 2011 - 21:29

merci ca marche niquel !

lauraestate
**

Messages : 91
Inscrit(e) le : 18/12/2010

http://www.seventh-heaven-stables.com/
lauraestate a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum