Many apologies, but Ive been struggling with what seems such a simple issue.
Essentially, I've created an HTML email template and need to change the bottom of the footer from the color to an image itself.
I have tried this with the code below, but the image is
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0; background-color: #02d19b; background-image: url('C:\Users\Jimmy\Documents\file-store\Email\images\footerster9605468.png'); background-repeat: no-repeat;" width="640">
<tbody>
<tr>
<th class="column" style="mso-table-lspace: 0; mso-table-rspace: 0; font-weight: 400; text-align: left; vertical-align: top; padding-left: 20px; padding-right: 20px;" width="33.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="text_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0; word-break: break-word;" width="100%">
<tr>
<td style="padding-top:20px;">
<div style="font-family: Arial, sans-serif">
<div style="font-size: 12px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #f3f2f2; line-height: 1.2;">
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left;">Ourwebstie.com</p>
<p style="margin: 0; font-size: 14px; text-align: left;">2021 © All rights reserved</p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
<p style="margin: 0; font-size: 14px; text-align: left; mso-line-height-alt: 14.399999999999999px;"><br/></p>
</div>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="image_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="padding-bottom:25px;padding-left:5px;padding-right:5px;padding-top:5px;width:100%;">
<div style="line-height:10px"><a href="http://www.example.com/" style="outline:none" tabindex="-1" target="_blank"><img alt="Logo" src="../../../../Downloads/-2toy3a30o3r(1)/images/stripe-1920w.png" style="display: block; height: auto; border: 0; width: 163px; max-width: 100%;" title="Logo" width="163"/></a></div>
</td>
</tr>
</table>
</th>
<th class="column" style="mso-table-lspace: 0; mso-table-rspace: 0; font-weight: 400; text-align: left; vertical-align: top; padding-left: 20px; padding-right: 20px;" width="33.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="text_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0; word-break: break-word;" width="100%">
<tr>
<td style="padding-bottom:10px;padding-top:20px;">
<div style="font-family: Arial, sans-serif">
<div style="font-size: 14px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; line-height: 1.2;">
<p style="margin: 0; font-size: 14px; text-align: left; letter-spacing: 2px;"><span style="font-size:18px;">Contact:</span></p>
</div>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="menu_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="color:#f3f2f2;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;text-align:left;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="text-align:left;font-size:0px;">
<div class="menu-links">
<!--[if mso]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="padding-top:10px;padding-right:0px;padding-bottom:5px;padding-left:0px">
<![endif]--><span class="label" style="padding-top:10px;padding-bottom:5px;padding-left:0px;padding-right:0px;display:block;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;color:false;letter-spacing:normal;">Mobile Number Here </span>
<!--[if mso]></td></tr><tr><td style="text-align:left;padding-top:10px;padding-right:0px;padding-bottom:5px;padding-left:0px"><![endif]--><a href="mailto:[email protected]" style="padding-top:10px;padding-bottom:5px;padding-left:0px;padding-right:0px;display:block;color:#f3f2f2;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;font-size:16px;text-decoration:none;letter-spacing:normal;">[email protected]</a>
<!--[if mso]></td></tr></table><![endif]-->
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="social_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="padding-top:20px;text-align:left;padding-right:0px;padding-left:0px;padding-bottom:20px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="social-table" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="126px">
<tr>
<td style="padding:0 10px 0 0;"><img alt="Facebook" height="32" src="../../../../Downloads/-2toy3a30o3r(1)/images/facebook2x.png" style="display: block; height: auto; border: 0;" title="facebook" width="32"></td>
<td style="padding:0 10px 0 0;"><img alt="Twitter" height="32" src="../../../../Downloads/-2toy3a30o3r(1)/images/twitter2x.png" style="display: block; height: auto; border: 0;" title="twitter" width="32"></td>
<td style="padding:0 10px 0 0;"><img alt="Instagram" height="32" src="../../../../Downloads/-2toy3a30o3r(1)/images/instagram2x.png" style="display: block; height: auto; border: 0;" title="instagram" width="32"></td>
</tr>
</table>
</td>
</tr>
</table>
</th>
<th class="column" style="mso-table-lspace: 0; mso-table-rspace: 0; font-weight: 400; text-align: left; vertical-align: top; padding-left: 20px; padding-right: 20px;" width="33.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="image_block" role="presentation" style="mso-table-lspace: 0; mso-table-rspace: 0;" width="100%">
<tr>
<td style="padding-bottom:50px;padding-left:30px;padding-right:30px;padding-top:50px;width:100%;">
<div style="line-height:10px"><a href="http://www.example.com/" style="outline:none" tabindex="-1" target="_blank"><img alt="Logo" src="../../Unnamed Site 2/logo - new.png" style="display: block; height: auto; border: 0; width: 113px; max-width: 100%;" title="Logo" width="143"/></a></div>
</td>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>This is the ouptut I get:
I understand the color is there due to background-color code, but I'm sure the background-image should overwrite this? Even if I remove the background-color code, everything disappears.
I would very much appreciate your assistance with this predicament.
Best regards,
Jimmy
CodePudding user response：
The image doesn't work because you are pointing to your local C:. Have the image hosted somewhere and you will see your code works properly.
Alternatively, try pointing to it using HTML File Paths