HTML 电子邮件背景图片未显示全宽
HTML Email background image not displaying full width
我正在构建一个包含两张背景图片的 HTML 电子邮件。电子邮件的宽度为 600px。
两张图片的尺寸都是 600 x 786px，我已经设法让第一张背景图片填满父图片的宽度 table。
然而，第二张图片与第一张尺寸完全相同，但显示效果不佳，您可以看到它被截掉了一半。
任何指导将不胜感激。
代码如下。
<!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;">
</div>
</body>
</html>
您需要使用 background-size: cover; 属性 来修复它。根据文档
The background-size property specifies the size of the background
images.
There are four different syntaxes you can use with this property:
- the keyword syntax ("auto", "cover" and "contain"),
- the one-value syntax (sets the width of the image (height becomes "auto"),
- the two-value syntax (first value: width of the image, second value: height), - the multiple background syntax (separated with comma).
您需要使用 background-size: 100% 100%; 和 height:786px 并且您的第二张图片已经有白色背景
所以使用没有白色背景的图像，并在应用背景图像的第二个 td 中添加内容或高度。
图片没有被剪切，里面有一些空白，尺寸是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 电子邮件。电子邮件的宽度为 600px。
两张图片的尺寸都是 600 x 786px，我已经设法让第一张背景图片填满父图片的宽度 table。
然而，第二张图片与第一张尺寸完全相同，但显示效果不佳，您可以看到它被截掉了一半。
任何指导将不胜感激。
代码如下。
<!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;">
</div>
</body>
</html>
您需要使用 background-size: cover; 属性 来修复它。根据文档
The
background-sizeproperty specifies the size of the background images.There are four different syntaxes you can use with this property:
- the keyword syntax ("auto", "cover" and "contain"),
- the one-value syntax (sets the width of the image (height becomes "auto"),
- the two-value syntax (first value: width of the image, second value: height), - the multiple background syntax (separated with comma).
您需要使用 background-size: 100% 100%; 和 height:786px 并且您的第二张图片已经有白色背景
所以使用没有白色背景的图像，并在应用背景图像的第二个 td 中添加内容或高度。
图片没有被剪切，里面有一些空白，尺寸是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>