web-dev-qa-db-fra.com

CSS d'arrière-plan dans un e-mail html - Gmail ne prend pas en charge

je veux envoyer un email de corps html comme ci-dessous avec le fond-image css à mes utilisateurs:

<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
    My Content
</div>

mais comme le lien ci-dessous le dit, google ne prend pas en charge les images d'arrière-plan css!
http://www.campaignmonitor.com/css/

que puis-je faire à ce sujet?

htmlcssemail
21
SilverLight

Avez-vous essayé de définir l'attribut background d'une table?

C'est la méthode recommandée détaillée dans le billet de blog Mailchimp suivant: Images d'arrière-plan et CSS dans HTML Email .

Exemple (testé dans Gmail)

    <table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
        <tr>
            <td>
                Email Content...
            </td>
        </tr>
    </table>
44
jdavies

Vous ne pouvez rien y faire. L'utilisation de CSS pour définir l'image d'arrière-plan n'est pas prise en charge dans de nombreuses applications de messagerie Web pour des raisons de sécurité.

La seule façon d'afficher l'arrière-plan derrière le texte est de créer une image avec du texte dessus et de l'afficher en utilisant <img src="##" /> tag. Cependant, n'oubliez pas d'ajouter un lien vers la version texte de votre e-mail et/ou un lien vers une copie basée sur une page Web de votre newsletter.

De plus, vous devez vous rappeler que la conception de la newsletter est très différente de la conception du site Web . Vous devez ignorer toutes les normes habituelles, vous devez utiliser des tableaux, des styles en ligne, des balises img, etc.

Consultez cette page pour quelques bonnes suggestions: http://www.sitepoint.com/code-html-email-newsletters/

MailChip (probablement le système de gestion de newsletter le plus populaire) a également de très bonnes suggestions sur la façon de coder les e-mails HTML: http://kb.mailchimp.com/article/how-to-code-html-emails

7
rochal

Mise à jour à partir de 2019. Bien qu'il y ait des problèmes avec l'ajout d'une image d'arrière-plan à partir d'une image en ligne sur l'e-mail (au moins, je n'ai pas trouvé de moyen de le faire fonctionner). En fait, l'image d'arrière-plan css fonctionne correctement sur au moins certains éléments tant que ce sont des URL absolues pour la ressource, mon extrait de code qui fonctionne sur gmail à partir de juin 2019:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">

Cela me fait me demander pourquoi cela n'a pas fonctionné pour l'auteur. J'ai peu de théories:

a) à l'époque, cela ne fonctionnait pas

b) il ne fonctionne pas sur les éléments div

c) le lien a été rompu

d) guillemet simple manquant

e) guillemet simple et non double autour du style d'attribut

f) malgré la largeur et la hauteur du style, div était de taille 0x0

(Certains de ceux ci-dessus semblent stupides)

0
Drachenfels

J'ai testé sur gmail: gmail supprimera background-color = # FFFFFF avec "background-image", c'est bizarre.

"background" fonctionne, donc convertissez la couleur de fond et l'image de fond en "background" avec style.

"background-color" = # FEFEFE fonctionne aussi

testé le 2013-09-10

0
magicgod