Email HTML et Background

**lemilig** · 30/09/2008, 10h32

Bonjour,

Je dois envoyer un emailing et j'ai un souci : je n'arrive pas à afficher l'arrière-plan (Que ce soit une image en répétition ou que ce soit une simple couleur). Je tourne le problème en tous sens depuis hier et je n'arrive à rien... Quelqu'un saurait-il d'où celà peut venir ?

Pour infio, dans la version en ligne de l'emial, pas de problème, j'ai bien mon fond. Par contre, ça ne marche plus quand j'insère le HTML dans Thunderbird...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La charte de l'Esprit du Sport</title>
 
<style type='text/css'>
	a img{
		border:none;
	}
 
	body{
		background-repeat:repeat-x;
	}
 
</style>
 
</head>
 
<body background="http://www.lespritdusport.fr/email/img/emailing1_02.gif" bgcolor="#E9EEF0">
<div align="center">
  <table width="486" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="http://www.lespritdusport.fr/email/img/emailing1_04.jpg" alt="L'Esprit du Sport" width="486" height="124" /></td>
    </tr>
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFF"><table width="486" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="http://www.lespritdusport.fr/email/img/emailing1_06.gif" width="194" height="204" /></td>
          <td rowspan="2"><p><font size="4" face="Verdana, Arial, Helvetica, sans-serif">Découvrez en exclusivité <br />
            Mercredi 1er octobre à 9h <br />
            la charte de l’esprit sportif <br />
            et le nouvel emblème <br />
            de l’Esprit du Sport</font></p>
            <p>&nbsp;</p>
            <p align="center"><a href="http://www.lespritdusport.fr" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_09.gif" alt="Accéder au Site de l'Esprit du Sport" width="127" height="29" /></a></p></td>
        </tr>
        <tr>
          <td><img src="http://www.lespritdusport.fr/email/img/emailing2_06.gif" alt="L'Esprit du Sport" width="194" height="204" /></td>
          </tr>
      </table></td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF"><div align="center"></div></td>
    </tr>
 
    <tr>
      <td align="center" bgcolor="#FFFFFF"><div align="center">
        <table border="0" cellspacing="0" cellpadding="10">
          <tr>
            <td><a href="http://www.jeunesse-sports.gouv.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_14.gif" alt="Ministère de la Jeunesse et des Sports" width="49" height="48" /></a></td>
            <td><a href="http://www.fff.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_15.gif" alt="FFF" width="45" height="48" /></a></td>
            <td><a href="http://www.lnr.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_16.gif" alt="LNR" width="35" height="48" /></a></td>
            <td><a href="http://www.basketfrance.com/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_17.gif" alt="FFBB" width="47" height="48" /></a></td>
            <td><a href="http://www.lnh.fr/" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_18.gif" alt="LNH" width="39" height="48" /></a></td>
            <td><a href="http://www.ff-handball.org/ffhb/index.php" target="_blank"><img src="http://www.lespritdusport.fr/email/img/emailing1_19.gif" alt="FFH" width="61" height="48" /></a></td>
            <td><a href="http://www.unss.org/"><img src="http://www.lespritdusport.fr/email/img/emailing1_20.gif" alt="UNSS" width="27" height="48" /></a></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
</div>
</body>
</html>

**romain_ci** · 30/09/2008, 10h55

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<style type='text/css'>
	a img{
		border:none;
	}
 
	body{
                         background-color : #000000; // ta couleur
		background-repeat:repeat-x;
	}
 
</style>

Essai de le mettre dans le css...

**lemilig** · 30/09/2008, 11h33

OK, en fait j'ai déjà essayé et c'est pareil.

Dans les emails, je place toujours un minimum de css, toujours en style. Il n'y a rien d'autre en css que ce que vous voyez... Et il y en même plus que d'habitude : généralement, je me contente de définir l'aspect des liens en css et le reste est full HTML.

Je me demande si le problème ne vient pas juste du fait que je lance le mail depuis Thunderbird en injectant le code dans un nouveau message (pour les tests). Je vais vois ce que ça donne sous Sarbacane.

**kaiser59** · 30/09/2008, 16h04

Salut,

Si j'ai bien compris, tu souhaites intégrer du css dans un email ? Le problème est qu'à l'heure actuel, il n'y a pas bcp de messagerie qui prenne en compte les css. Du coup, tu dois l'intégrer dans ton code et non pas sous forme de style genre

Code html :

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

<table style="">

mais :

Code html :

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

1
2
<table bgcolor="">
<!-- Désolé si ce n'est pas le bon tag bgcolor sa fait longtemps que je ne passe plus par ça, mais en gros c'est un exemple ;) -->

Etant donné, qu'il existe plusieurs messageries, tu ne peux donc pas adapter chaque style pour chq messagerie... De ce fait, tu n'as pas trop le choix. Je sais que Outlook 2007 gère le css, mais toutes les messageries ne le font pas.

**lemilig** · 10/10/2008, 11h06

Je me limite normalement au css pour deux choses : supprimer les bordures de lien autour des images (a img {}) et personnaliser les liens pour me débarrasser de leur couleur par défaut. Mais là le graphiste m'avait collé un arrière plan dégradé... auquel je lui ai finalement fait renoncer. Et voilà la solution...

**HiRoN** · 10/10/2008, 11h39

Salut,

Perso, j'aurai tenté en remplaçant :

Code HTML :

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

<body background="http://www.lespritdusport.fr/email/img/emailing1_02.gif" bgcolor="#E9EEF0">

Par :

Code HTML :

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

<body>

Et :

Code HTML :

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

<div align="center">

Par :

Code HTML :

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

<div align="center" style="background:url(email/img/emailing1_02.gif); background-repeat:repeat-x; width:486px;">

Email HTML et Background

HTML

Vue hybride

Discussions similaires

Partager

Partager