Estoy creando un correo electrónico HTML con dos imágenes de fondo. El correo electrónico tiene un ancho de 600 px.

Ambas imágenes tienen dimensiones de 600 x 786px y he logrado obtener la primera imagen de fondo para llenar el ancho de la tabla principal.

Sin embargo, la segunda imagen, que tiene exactamente las mismas dimensiones que la primera, no se muestra bien, puede ver que está medio cortada.

Cualquier orientación sería muy apreciada.

Código a continuación.

<!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>
0
Jordan Miguel 10 sep. 2018 a las 13:28

3 respuestas

La mejor respuesta

La imagen no se corta, tiene algo de espacio en blanco y su dimensión es 1000x768px https://image.ibb.co/fGSBn9/legacytest.png.

En su lugar use css background-position: top center que solucionará el problema. Por favor, eche un vistazo al fragmento que funciona a continuación, espero que ayude :)

<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>
0
Girisha C 10 sep. 2018 a las 10:51

Debe usar la propiedad background-size: cover; para solucionarlo. De acuerdo con los documentos

La propiedad background-size especifica el tamaño del fondo imágenes

Hay cuatro sintaxis diferentes que puede usar con esta propiedad:

  • la sintaxis de palabras clave ("auto", "cover" y "contienen"),
  • la sintaxis de un valor (establece el ancho de la imagen (la altura se convierte en "auto"),
  • la sintaxis de dos valores (primer valor: ancho de la imagen, segundo valor: altura), - la sintaxis de fondo múltiple (separada por comas).
0
Muhammad Omer Aslam 10 sep. 2018 a las 12:44

Debe utilizar background-size: 100% 100%; y height:786px y su segunda imagen ya tiene fondo blanco ingrese la descripción de la imagen aquí

Por lo tanto, use una imagen sin fondo blanco y agregue contenido o altura al segundo td donde aplicó la imagen de fondo.

1
Hiren Vaghasiya 10 sep. 2018 a las 10:49