htmlニュースレターで背景イメージが機能しない

私は電子メールのニュースレターを作成しています。ニュースレターの背景イメージを追加していますが、背景イメージは電子メールにテーブルを表示していません。私はイメージのオンラインパスを与える必要があります。コードに間違いがありますか？私を助けてください。htmlニュースレターで背景イメージが機能しない

はここに私のコードです：

<style type="text/css"> 
 
    .position{ 
 
    font-family:century gothic !important; 
 
    font-size:20px; 
 
    color:white; 
 
    font-weight:bold; 
 
    text-decoration:underline; 
 
    line-height:1.2; 
 
    } 
 
    .location,.condition{ 
 
    font-family:century gothic !important; 
 
    font-size:17px; 
 
    color:white; 
 
    } 
 
    .apply_info{ 
 
    font-family:century gothic !important; 
 
    font-size:20px; 
 
    color:black !important; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <table border="0" width="100%" background="http://i67.tinypic.com/i69xzq.jpg" class="tbl_wrapper" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%"> 
 
     <tr> 
 
     <td> 
 
      <table width="100%"> 
 
      <tr height="162px"></tr> 
 
      <tr> 
 
       <td colspan="2"> 
 
       <table width="100%"> 
 
        <tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">NOW</td></tr> 
 
        <tr><td style="font-family:Monoton; font-size:200px;color:#0099ff;text-shadow:3px 3px white;text-align:right">HIRING</td></tr> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <table width="100%"> 
 
      <tr> 
 
       <td style="text-align:right"> 
 
       <table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic"> 
 
        <tr> 
 
        <td>JOIN THE TEAM</td> 
 

 
        </tr> 
 
       </table> 
 
       </td> 
 
       <td width="200px" height="20px" bgcolor="red"></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td> 
 
      <table width="100%"> 
 
      <tr> 
 
       <td width="200px" height="20px" bgcolor="red"></td> 
 
       <td style="text-align:left"> 
 
       <table width="100%" style="font-size:40px;color:red;font-weight:bold;font-family:century gothic"> 
 
        <tr> 
 
        <td>OPEN POSITIONS</td> 
 
        </tr> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 

 
     <tr> 
 
     <td colspan="4"> 
 
      <table width="100%"> 
 
      <tr> 
 
       <td> 
 
       <table width="100%"> 
 
        <tr> 
 
        <td class="position" colspan="3">IT Support</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="location" colspan="3">Delhi</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="condition" colspan="3">(Freshers can also apply)</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="position" colspan="3">OPS Executive</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="location" colspan="3">Delhi & Jaipur</td> 
 
        </tr> 
 
        <tr > 
 
        <td class="condition" colspan="3">(Freshers can also apply)</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="position" colspan="3">Data Base Expert</td> 
 
        </tr> 
 
        <tr> \t 
 
        <td class="location" colspan="3">Delhi</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="condition" colspan="3">(Experienced from premier/reputed institute)</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="condition" colspan="3">Experience 3-5 Years</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="position" colspan="3">Full Stack Developer</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="location" colspan="3">Delhi</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="condition" colspan="3">(Experienced from premier/reputed institute)</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="condition" colspan="3">Experience 5-7 Years</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="position" colspan="3">Sales Executives/Manager</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="location" colspan="3">Delhi</td> 
 
        </tr> 
 
        <tr> 
 
        <td class="condition" colspan="3">Experience 3-5 Years</td> 
 
        </tr> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
     <tr height="160px"></tr> 
 

 
     <tr> 
 
     <td> 
 
      <table border="0" width="100%"> 
 
      <tr> 
 
       <td> 
 
       <table width="100%"> 
 
        <tr> 
 
        <td width="400px" height="20px" bgcolor="red"></td> 
 
        <td style="text-align:center"> 
 
         <table width="100%" style="font-size:30px;color:red;font-family:century gothic"> 
 
         <tr> 
 
          <td>APPLY NOW</td> 
 
         </tr> 
 
         </table> 
 
        </td> 
 
        <td width="400px" height="20px" bgcolor="red"></td> 
 
        </tr> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      </table> 
 

 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <table width="100%"> 
 
      <tr><td class="apply_info">[email protected]</td></tr> 
 
      <tr><td class="apply_info">44E/9 First Floor, Kishangarh, Vasant Kunj, New Delhi-110070</td></tr> 
 
      <tr><td class="apply_info">Phone-8373902513</td></tr> 
 
      <tr><td><img src="http://i67.tinypic.com/rmk8ev.jpg" class="img-responsive center-block" style="height:80px" /></td></tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div>

出典

2016-12-20 Juhi Mathur

関連するコード/ htmlのみをここに投稿してください。残りはすべて必要ありません。私はcssやhtmlのどこにも背景画像が使われていないことを知っています。何がうまくいかないか、意図的な振る舞いは何かを説明してください。 – Esko

@esko私はテーブルの属性として背景イメージを使用しました。 –

あなたの画像リンクが間違っている、 "http://i67.tinypic.com/rmk8ev.jpg" あなたのリンクはtinypicにリダイレクトします。

代わりに、あなたの場合には「http://oi67.tinypic.com/rmk8ev.jpg」

だろう。これは良い習慣ではない画像ソースリンクをつかむ必要がありますtinpicがそれを削除することができるので、あなたのサーバー上で独自のイメージをホストする必要があります。

出典

2016-12-20 12:30:26

あなたのCSS/HTMLに実際に背景画像が表示されないため、特定の問題を診断することが難しくなります。

しかし、さまざまな電子メールクライアントでレンダリングすると、背景イメージに問題が発生します。ここではリトマスによって書かれたトピックに関する包括的な記事、です：https://litmus.com/community/learning/25-understanding-background-images-in-email

の記事で述べたように、https://backgrounds.cm/で「防弾背景画像」ツールは本当に便利ですし、Outlookの問題バージョンで背景画像をレンダリングしますVMLコードが含まれています。

出典

2016-12-20 12:31:37 nimaek

いくつかの他の回答にピギーバックを試してみてください。 http://i67.tinypic.com/i69xzq.jpg すべき

更新画像参照パスは<td>にいくつかのレベルダウン背景画像用のインラインCSSを移動
。
background="http://i67.tinypic.com/i69xzq.jpg"（あなたのように）を使用するか、 `style =" background-image：http://i67.tinypic.com/i69xzq.jpg; "を試してください。 CSSの短縮形を避けてください。

Backgrounds.cmを使用してOutlookのVMLコードを生成します。

<body> 
    <div class="container"> 
     <table border="0" width="100%" class="tbl_wrapper"> 
      <tr> 
       <td background="http://i67.tinypic.com/i69xzq.jpg" bgcolor="#ffffff" valign="top" style="text-align:center;color:black;background-repeat:no-repeat;background-size:100%""> 
        <!--[if gte mso 9]> 
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;"> 
        <v:fill type="tile" src="http://i67.tinypic.com/i69xzq.jpg" color="#ffffff" /> 
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> 
        <![endif]--> 
        <div> 
         <table width="100%"> 
          <tr height="162px"></tr> 
          <tr> 
           <!-- Email Content --> 
          </tr> 
         </table> 
        </div> 
        <!--[if gte mso 9]> 
        </v:textbox> 
        </v:rect> 
        <![endif]--> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body>

これは、あなたの電子メールクライアント間でかなり良いカバレッジを与える必要があります！

出典

2016-12-20 19:04:51

-Thanku so much。私のために素晴らしい背景画像を使用！ –

htmlニュースレターで背景イメージが機能しない

答えて

関連する問題