web-dev-qa-db-ja.com

HTMLメール内の背景画像のCSS-Gmailはサポートしていません

私はユーザーに背景画像のCSSを含む以下のようなHTML本文の電子メールを送信したい：

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

ただし、下のリンクにあるように、googleはbackground-image cssをサポートしていません！
http://www.campaignmonitor.com/css/

私はそれについて何ができますか？

htmlcssemail
21
SilverLight

テーブルの background 属性を設定しようとしましたか？

これは、Mailchimpの次のブログ投稿で詳しく説明されている推奨方法です。 HTMLメールの背景画像とCSS 。

例（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

それについては何もできません。セキュリティ上の理由から、CSSを使用して背景画像を設定することは、多くのWebメールアプリケーションでサポートされていません。

テキストの背景を実際に表示する唯一の方法は、テキストを含む画像を作成し、<img src="##" />タグを使用して表示することです。ただし、メールのテキストバージョンへのリンクやニュースレターのWebページベースのコピーへのリンクを必ず追加してください。

さらに、ニュースレターのデザインはウェブサイトのデザインとは非常に異なることを覚えておく必要があります。通常の標準はすべて無視する必要があり、テーブル、インラインスタイル、imgタグなどを使用する必要があります。

いくつかの良い提案のためにこのページをチェックしてください： http://www.sitepoint.com/code-html-email-newsletters/

また、MailChip（おそらく最も人気のあるニュースレター管理システム）には、HTML電子メールのコーディング方法に関する非常に良い提案がほとんどありません。 http://kb.mailchimp.com/article/how-to-code-html-emails

7
rochal

2019年の更新。電子メールのインライン画像から背景画像を追加する際に問題があります（少なくとも機能させる方法が見つかりませんでした）。実際には、css-backgroundイメージは、リソースへの絶対URLである限り、少なくともいくつかの要素で正常に機能します。2019年6月の時点でGmailで機能するスニペットです。

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

これは、著者にとってなぜ機能しなかったのか不思議に思う。私にはいくつかの理論があります：

a）当時は機能しませんでした

b）div要素では機能しません

c）リンクが壊れていた

d）単一引用符がない

e）属性スタイルを二重引用符ではなく単一引用符で囲む

f）スタイルの幅と高さにもかかわらず、divは0x0サイズでした

（上記の愚かな音のいくつか）

0
Drachenfels

Gmailでテストしました：gmailはbackground-color =＃FFFFFFを「background-image」で削除しますが、これは奇妙です。

「背景」は機能するため、背景色と背景画像をスタイルで「背景」に変換します。

"background-color" =＃FEFEFEも機能する

2013-09-10にテスト済み

0
magicgod