CODEWITHSUNDEEP
htmlcssemailbackground-image
JordanMiguel
JordanMiguel

Reputation: 740

HTML Email background image not displaying full width

I'm building a HTML email with two background images. The email has a width of 600px.

Both images have dimensions of 600 x 786px and I've managed to get the first background image to fill the width of the parent table.

However the second image, that has the exact same dimensions as the first isn't displaying well, you can see it's half cut off.

Any guidance would be greatly appreciated.

Code below. 

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

Upvotes: 0

Views: 1368

Answers (3)

Hariom Singh
Hariom Singh

Reputation: 1540

You need to use background-size: cover; property to fix it. According to the docs

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

Upvotes: 0

Girisha C
Girisha C

Reputation: 1950

The image is not cut, it has some whitespace in it, and its dimension is 1000x768px https://image.ibb.co/fGSBn9/legacytest.png.

instead use css background-position: top center that will fix the issue. please have a look at the below-working snippet, hope it helps :)

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

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You need to use background-size: 100% 100%; and height:786px and your second image have white background already enter image description here

So use image without white background and add content or height to second td where you applied background image.

Upvotes: 1

Related Questions