Question

我正在构建带有两个背景图像的HTML电子邮件。电子邮件的宽度为600像素。

这两张图片的尺寸均为 600 x 786px ，我设法获得了第一张填充父表宽度的背景图片。

但是第二张图像与第一张图像尺寸完全相同的图片显示不好，您会看到它被切除了一半。

任何指导将不胜感激。

下面的代码。

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head></head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" style="margin:0; padding:0">
<!-- /// MSO code to set the DPI at 96 to help resolve DPI scaling issues /// -->
	
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />

<style type="text/css">
span.MsoHyperlink, span.MsoHyperlinkFollowed {mso-style-priority:99;color:inherit;}
a {color:inherit; text-decoration:none;}
.ReadMsgBody, .ExternalClass {width:100%;}
.ExternalClass * {line-height:110%;}
body {width:100%!important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table {border-collapse:collapse!important; mso-table-lspace:0pt; mso-table-rspace:0pt;}
.gmailfix {display:none; display:none!important;}
span > a, sup > a, span > a > sup {color:inherit!important; text-decoration:none;} 
.footer span > a {color:#333333!important;} 
[office365] button { display: block !important; margin:0 !important; padding:0 !important; }
[office365] div { display: block !important }
[owa] .m-show img { display:none!important; }
/*Responsive Styling*/
@media only screen and (max-width: 480px) {
.MainTable {width:100%!important;min-width:320px!important;}
.main-padding {padding:0px!important;} 
html, body {width:100%!important; min-width:100%!important;} 
[owa] .m-show img { display:block!important; }
.m-hide, .m-hide * {display:none!important; height:0!important; width:0px!important; visibility:hidden!important; line-height:0px!important; font-size:0px!important;} 
.m-show {display:block!important; max-height:none!important;}
.float-left {float:left!important; clear:none!important;}
.float-right {float:right!important; clear:none!important;} 
.half-width {width:48%!important; display:inline-block!important;}
.block, .drop, .drop tbody, .drop table, .drop tr {float:none!important; width:100%!important; padding:0!important; display:block!important;}
.center {text-align:center!important;} .align-left {text-align:left!important;} .align-right {text-align:right!important;} .absolute {position:absolute!important;}
table.block, table.drop, .drop table, .drop tbody {display:table!important;}
tr.block, tr.drop, .drop tr {display:table-row!important;}
td.block, td.drop, .drop td {display:table-cell!important;}
.center > img, img.center, .align-left > img, img.align-left, .align-right > img, img.align-right {display:inline-block!important;}
.center table.center, .align-right > table, .align-left > table {display:inline-table!important;}
.background-none {background:transparent!important;}
.background-image-none {background-image:none!important;}
.text-size {line-height:120%!important;} .text-size-10px {font-size:10px!important;}
.text-size-11px {font-size:11px!important;} .text-size-12px {font-size:12px!important;}
.text-size-13px {font-size:13px!important;} .text-size-14px {font-size:14px!important;}
.text-size-15px {font-size:15px!important;} .text-size-16px {font-size:16px!important;}
.text-size-17px {font-size:17px!important;} .text-size-18px {font-size:18px!important;}
.text-size-19px {font-size:19px!important;} .text-size-20px {font-size:20px!important;}
.text-size-21px {font-size:21px!important;} .text-size-22px {font-size:22px!important;}
.text-size-23px {font-size:23px!important;} .text-size-24px {font-size:24px!important;}
.text-size-25px {font-size:25px!important;} .text-size-26px {font-size:26px!important;}
.text-size-27px {font-size:27px!important;} .text-size-28px {font-size:28px!important;}
.text-size-29px {font-size:29px!important;} .text-size-30px {font-size:30px!important;}
.width-100 {width:100%!important; height:auto!important;}
.width-90 {width:90%!important; height:auto!important;}
.width-80 {width:80%!important; height:auto!important;}
.width-70 {width:70%!important; height:auto!important;}
.width-60 {width:60%!important; height:auto!important;}
.width-50 {width:50%!important; height:auto!important;}
.width-40 {width:40%!important; height:auto!important;}
.width-30 {width:30%!important; height:auto!important;}
.width-20 {width:20%!important; height:auto!important;}
.width-0 {width:0px!important; height:auto!important;}
.width-auto {width:auto!important;}
.height-auto {height:auto!important;}
.padding-0 {padding:0!important;} .padding-5 {padding:5px!important;}
.padding-10 {padding:10px!important;} .padding-15 {padding:15px!important;}
.padding-20 {padding:20px!important;} .padding-25 {padding:25px!important;} .padding-30 {padding:30px!important;}
.padding-horz-0 {padding-left:0px !important; padding-right:0px !important;}
.padding-horz-5 {padding-left:5px!important; padding-right:5px!important;}
.padding-horz-10 {padding-left:10px!important; padding-right:10px!important;}
.padding-horz-15 {padding-left:15px!important; padding-right:15px!important;}
.padding-horz-20 {padding-left:20px!important; padding-right:20px!important;}
.padding-horz-25 {padding-left:25px!important; padding-right:25px!important;}
.padding-horz-30 {padding-left:30px!important; padding-right:30px!important;}
.padding-vert-0 {padding-top:0px!important; padding-bottom:0px!important;}
.padding-vert-5 {padding-top:5px!important; padding-bottom:5px!important;}
.padding-vert-10 {padding-top:10px!important; padding-bottom:10px!important;}
.padding-vert-15 {padding-top:15px!important; padding-bottom:15px!important;}
.padding-vert-20 {padding-top:20px!important; padding-bottom:20px!important;}
.padding-vert-25 {padding-top:25px!important; padding-bottom:25px!important;}
.padding-vert-30 {padding-top:30px!important; padding-bottom:30px!important;}
.padding-right-0 {padding-right:0px!important;}
.padding-right-5 {padding-right:5px!important;} .padding-right-10 {padding-right:10px!important;}
.padding-right-15 {padding-right:15px!important;} .padding-right-20 {padding-right:20px!important;}
.padding-right-25 {padding-right:25px!important;} .padding-right-30 {padding-right:30px!important;}
.padding-left-0 {padding-left:0px !important;}
.padding-left-5 {padding-left:5px !important;} .padding-left-10 {padding-left:10px !important;}
.padding-left-15 {padding-left:15px !important;} .padding-left-20 {padding-left:20px !important;}
.padding-left-25 {padding-left:25px !important;} .padding-left-30 {padding-left:30px !important;}
.padding-top-0 {padding-top:0px!important;} .padding-top-5 {padding-top:5px!important;}
.padding-top-10 {padding-top:10px!important;} .padding-top-15 {padding-top:15px!important;}
.padding-top-20 {padding-top:20px!important;} .padding-top-25 {padding-top:25px!important;} .padding-top-30 {padding-top:30px!important;}
.padding-left-25 {padding-left:25px!important;}
.padding-right-25 {padding-right:25px!important;}	
.padding-bottom-0 {padding-bottom:0px!important;}
.padding-bottom-5 {padding-bottom:5px!important;} .padding-bottom-10 {padding-bottom:10px !important;}
.padding-bottom-15 {padding-bottom:15px !important;} .padding-bottom-20 {padding-bottom:20px !important;}
.padding-bottom-25 {padding-bottom:25px !important;} .padding-bottom-30 {padding-bottom:30px !important;}
/*Styles Specific to this Email*/

.bg_mob { width:100%!important; height:auto!important; background:url(images/bg_mobile.jpg) no-repeat center #FFFFFF!important; background-size:contain!important; background-position:right top !important;}

	
</style>
<!--Superscript Styling to apply specific CSS for outlook-->
<!--[if gte mso 9]>
<style type="text/css">
sup {vertical-align: baseline; position: relative; top: -0.4em; font-size:85%;}
</style>
<![endif]-->
<!--[if !mso]><!-->	
<style type="text/css">
sup {vertical-align: top; font-size:50%; }
</style>
<!--<![endif]-->
<!--END SUPERSCRIPT STYLING-->

<!--TELEPHONE NUMBER-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
  <tr>
   <td align="center" valign="top" class="main-padding" bgcolor="#ffffff">
	 <table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px;">
	  <tbody>
	   <tr>
		<td align="center" valign="top">
		 <table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tbody>
			 <tr>
				<td align="left" valign="top" class="padding-horz-20 padding-top-10" style="padding:0px 43px 0px;">
				 <table width="100%" border="0" cellspacing="0" cellpadding="0">
				  <tbody>
					<tr>
					 <td align="right" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px; color:#999999; mso-line-height-rule:exactly;">
						<a href="" style="color:#0A38CB">888-336-4764</a>
					 </td>
					</tr>
				  </tbody>
				 </table>
				</td>
			 </tr>
			</tbody>
		 </table>
		</td> 
	   </tr>
	  </tbody>
	 </table>
   </td>
  </tr>
 </tbody>
</table>
<!--NAV BAR-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
  <tr>
   <td align="center" valign="top" class="padding-0" style="padding:0 10px;">
	<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;">
	 <tbody>
	  <tr>
	   <td align="left" valign="top" style="padding:0px 0">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
	     <tbody>
		  <tr>
			<td align="left" class="padding-vert-0" style="padding:15px 0;" valign="top">
			<!--Logo-->
		     <table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left">
			  <tbody>
			   <tr>
				 <td style="font-size:17px; line-height:22px; color:#ffffff; padding:0 20px 0px;">
				 <a href="">
				  <img src="https://image.ibb.co/kgxmEe/logo.png" alt="tempur" width="140" height="70" style="display:block;" border="0">
				 </a>
				 </td>
			   </tr>
			  </tbody>
			 </table>
		     <!--Menu Start-->
			 <table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
			  <tbody>
			   <tr>
				 <td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
				 <a href="">MATRESSES</a>
				 </td>
			   </tr>
			  </tbody>
			 </table>
			 <table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
			  <tbody>
			   <tr>
				 <td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000 padding:0 42px 0px;;">
				 <a href="">MATRESSES</a>
				 </td>
			   </tr>
			  </tbody>
			 </table>
			 <table align="left" border="0" cellspacing="0" cellpadding="0" class="align-left m-hide">
			  <tbody>
			   <tr>
				 <td class="text-size-13px" style="font-size:17px; line-height:80px; color:#000000; padding:0 42px 0px;">
				 <a href="">MATRESSES</a>
				 </td>
			   </tr>
			  </tbody>
			 </table>
			 <!--Menu End-->
			</td>
		  </tr>
	     </tbody>
		</table>   
	   </td>
	  </tr>
	 </tbody>
	</table>
   </td>
  </tr>
 </tbody>	
</table>
<!--HERO-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
  <tr>
   <td align="center" valign="top" style="padding:0px 0px 20px 0px;">
	 <table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
		 <td height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/kAmc4e/herobg.png">
	 <!--[if gte mso 9]>
		<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
			<v:fill type="tile" src="https://image.ibb.co/kAmc4e/herobg.png" color="#ffffff" />
			<v:textbox inset="0,0,0,0">
	 <![endif]-->
	<div>
	 <table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
	  <tbody>
	   <tr>
		  <td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
			 <a href=""><img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0"></a>
		  </td>
	   </tr>
	  </tbody>
	 </table>
	</div>
     <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
   		</td>
	 </table>
   </td>
  </tr>
 </tbody>
</table>
<!--LEGACY-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
  <tr>
   <td align="center" valign="top" style="padding:0px 0px 20px 0px;">
	 <table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
		 <td width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/fGSBn9/legacytest.png" style="width:640px;">
	 <!--[if gte mso 9]>
		<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:100%;">
			<v:fill type="tile" src="class="bg_mob" width="640" height="100" align="left" valign="top" bgcolor="#ffffff" background="https://image.ibb.co/f4Cxup/legacytest1.png" style="width:640px;"" color="#ffffff" />
			<v:textbox inset="0,0,0,0">
	 <![endif]-->
	<div>
	 <table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
	  <tbody>
	   <tr>
		  <td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
			 Legaxy
		  </td>
	   </tr>
	  </tbody>
	 </table>
	</div>
     <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
   		</td>
	 </table>
   </td>
  </tr>
 </tbody>
</table>

  <!--FIX FOR GMAIL iOS app issues -->
  <div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0; color:#ffffff; background-color:#ffffff;">
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  </div>
</body>

</html>

Answer 1

您需要使用background-size: 100% 100%;和height:786px，并且第二张图像已经具有白色背景

因此，请使用没有白色背景的图像，并在应用背景图像的第二个td中添加内容或高度。

Answer 2

您需要使用background-size: cover;属性对其进行修复。根据文档

background-size属性指定背景的大小   图片。

此属性可以使用四种不同的语法：


关键字语法（“自动”，“覆盖”和“包含”），

单值语法（设置图像的宽度（高度变为“自动”），

二值语法（第一个值：图像的宽度，第二个值：高度），-多背景语法（用逗号分隔）。

Answer 3

该图像未被剪切，其中包含一些空格，其尺寸为1000x768px https://image.ibb.co/fGSBn9/legacytest.png。

请使用css background-position: top center来解决此问题。请查看下面的代码段，希望对您有所帮助：）

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="top" style="padding:0px 0px 20px 0px;">
      <table width="640" class="MainTable" border="0" cellspacing="0" cellpadding="0" style="width:640px; margin:0 auto;">
        <tr>
          <td width="640" height="768" align="left" valign="top" style="background: #ffffff url('https://image.ibb.co/fGSBn9/legacytest.png') top center">Legacy</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

HTML电子邮件背景图片未显示完整宽度

3 个答案: