HTML Email padding issues on background image in <td>

HTML & CSS
1

Trying to make padding on the white box with the Headline and the button to space out evenly from the top-rigth-bottom. This however does not work, as Im trying it with the following code. Can anyone spot the issue here?

<!-- CONTAINER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
  <tr>
    <td align="center" style="padding: 0 0 0 0;">
      <!-- WRAPPER TABLE -->
      <table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
        <tr>
          <td>
            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper">
              <tr>
                <td background="img/Tschierva_glacier_rework_2.jpg" width="600" height="185" bgcolor="#7bceeb" valign="top" style="background-repeat: no-repeat;">
                  <!--[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="img/Tschierva_glacier_rework.png" color="#7bceeb" />
                  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                  <![endif]-->
                  <table border="0" cellpadding="0" cellspacing="0" width="182" height="153" align="right" class="wrapper" >
                    <tr>
                      <td align="center" style="padding: 20px 20px 0px 0px;">
                        <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                          <tr>
                            <td align="left" style="padding: 10px 0 10px; color: #111111; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; line-height: 22px;" class="mobile-title-pad">
                              Headline
                            </td>
                          </tr>
                          <tr>
                            <td align="left" style="padding: 0 0 10px 0; color: #111111; font-family: Arial, sans-serif; font-weight: normal; font-size: 15px; line-height: 19px;" class="mobile-text-pad">
                              Far far away, behind the word mountains, far from the countries
                            </td>
                          </tr>
                          <tr>
                            <td align="left" style="padding: 10px 0 20px 20px;">
                            <!-- TABLE-BASED BUTTON -->
                              <table border="0" cellpadding="0" cellspacing="0"  width="100%">
                                <tr>
                                  <td align="left" style="padding: 0 0 0 0;">
                                    <table border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td bgcolor="#333333" style="padding: 12px 17px 12px 17px;" align="center" class="mobile-button"><a href="http://example.com" style="font-size: 15px; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">Find out more</a>
                                        </td>
                                      </tr>
                                    </table>
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The following image is the result:

738Ă—344 159 KB

You can notice the blue background color (added it for testing), however the image is not fully covering the table cell. Any ideas?

Got the code from here:
https://backgrounds.cm/

Thank you

2

Hi,

Not sure if this is what you meant but it evens the padding out.

<!-- CONTAINER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
  <tr>
    <td align="center" style="padding: 0 0 0 0;">
      <!-- WRAPPER TABLE -->
      <table border="0" cellpadding="0" cellspacing="0" width="600" class="wrapper">
        <tr>
          <td>
            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper">
              <tr>
                <td background="img/Tschierva_glacier_rework_2.jpg" width="600" height="185" bgcolor="#7bceeb" valign="top" style="background-repeat: no-repeat;background-size:cover">
                  <!--[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="img/Tschierva_glacier_rework.png" color="#7bceeb" />
                  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                  <![endif]-->
                  <table border="0" cellpadding="0" cellspacing="0" width="182" height="153" align="right" class="wrapper" >
                    <tr>
                      <td align="center" style="padding: 20px 20px 0px 0px;">
                        <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                          <tr>
                            <td align="left" style="padding: 10px 10px 10px; color: #111111; font-family: Arial, sans-serif; font-weight: bold; font-size: 18px; line-height: 22px;" class="mobile-title-pad">
                              Headline
                            </td>
                          </tr>
                          <tr>
                            <td align="left" style="padding: 0 10px 10px; color: #111111; font-family: Arial, sans-serif; font-weight: normal; font-size: 15px; line-height: 19px;" class="mobile-text-pad">
                              Far far away, behind the word mountains, far from the countries
                            </td>
                          </tr>
                          <tr>
                            <td align="left" style="padding: 10px 10px 10px 10px;">
                            <!-- TABLE-BASED BUTTON -->
                              <table  bgcolor="#333333"  border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#333;"  width="100%">
                                <tr>
                                  <td align="left" style="padding: 0 0 0 0;">
                                    <table border="0" cellspacing="0" cellpadding="0">
                                      <tr>
                                        <td bgcolor="#333333" style="padding: 10px 10px 10px 10px;" align="center" class="mobile-button"><a href="http://example.com" style="font-size: 15px; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none;">Find out more</a>
                                        </td>
                                      </tr>
                                    </table>
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

You can try and use background-size:cover but of course most email clients won’t support this.

<td background="img/Tschierva_glacier_rework_2.jpg" width="600" height="185" bgcolor="#7bceeb" valign="top" style="background-repeat: no-repeat;background-size:cover">

3

Thak you, will try that ASAP

4

What if you took a different approach:

<td class=“with-pad">
	<h1>headline</h1>
       <p>lorem…

		<a href=“#” class=“button-link” >find out more</a>
       </p>
</td>


<!— put this in your stylesheet—>
.with-pad {
	padding:.67em ;  /* this is you rover padding here*/
}
.with-pad h1{
	margin: 0 0 1em 0; 
}
.with-pad h1,  .button-link{
	text-align:center;
}
 .button-link{
     display:block;
     margin: 1em 2em;  /*  change the second value to reduce the width of the button. Conversely, you could set an implicit width AND set margin: 1em auto; */ 
}

hope that helps

5

Did you realise this was for html email?

Things like display and margin are poorly supported in outlook.:slight_smile:

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.