Im working with some already created code for an email footer. There is currently a background color behind the table, and I would like to switch this to an image. I have the URL for the image, but am not sure what format that should be in img src= or url(). I am a beginner so please don't judge (I didn't write this code, it is the source code from our email provider)
I have tried a few different ways with no luck and just erasing the background color.
Here is the current code where I believe this should be edited?:
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="ftrBG" style="padding: 5px; background-color: rgb(76, 78, 77);" align="center" width="100%">
<table align="left" border="0" cellpadding="1" cellspacing="30" width="100%">
<tbody>
<tr>
style="background-image: url('http://www.myimage.com/poops.jpg');"
You can use the background-image property.
http://www.w3schools.com/cssref/pr_background-image.asp
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm developing an email where, by design, the banner image appears to be overlapping into the header. The effect is achieved by taking the top 35px or so of the banner image and making it its own image which sits in the row above the remainder of the banner image.
Here's a mockup with outlines of what I mean; the top portion of the image has a white background, while the rest of the image has a light blue background. The effect is that the image appears to be overlapping into the white.
mockup of email design
However, on some email clients (ran through the Hubspot tester) there's a gap between the images:
gap between images
I've tried the following, with no luck:
cellpadding and cellspacing = 0 to both tables
included table-collapse to my CSS
added margin-bottom to the top image (which only works on some email clients)
tried to valign="bottom" to the top image so it would sit on the bottom of the table
Here's the section of the email code, which works in the Hubspot preview, but not specific email clients:
<!-- TOP PORTION OF BANNER IMAGE -->
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" valign="center" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td cellpadding="0" cellspacing="0" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-top" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto;;margin-bottom:-5px' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END TOP PORTION OF BANNER IMAGE -->
<!-- REMAINDER OF BANNER IMAGE -->
<table bgcolor="#EDF1FC" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td valign="top" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-bottom" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END REMAINDER OF BANNER IMAGE -->
Are there specific ways I can get those images to align together across the board, outside of the methods I included above?
Fixed the issue by adding a style="display:block" to images.
I'm currenly working on an email in Mailchimp. I wanted an email that looked like this on mobile. Mailchimp's default behaviour is to stack images on mobile, so I had to get a custom code snippet to make this work.
It works on most devices, but on some (like Iphone 6s) I get the following behaviour.
Any ideas why this happens or how to fix it?
Here's the code that I used:
<table border="0" cellpadding="20" cellspacing="0" position="center" style="width:100%; max-width: 100px;" width="100%">
<tbody>
<tr>
<td width="70%"><a href="https://testlink.com" border="0" src="testimage.png"/></a></td>
<td width="0%"><a href="https://testlink.com" border="0" src="testimage.png"/></a></td>
</tr>
</tbody>
</table>
In my spree app site, when the user purchases an item, I am sending an order confirmation email.
The email when opened is aligned on the left instead of center.
Here's the email template code which I am using.
I am not sure what do I do to make it open in the center.
Although while starting the table, I have given the align property like below.
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
Please help.
It helps me:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
Content
</td>
</tr>
</table>
Where you have "Content" if it is a table, set it to the desired width and you will have centred content.
I have this table in my e.mail template and for some reason in outlook 2013 it apears double the height than it is actualy set:
[EDIT now codel looks like this]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
<tr class="preheader" width="100%" style="background-color:#d8ebf6;">
<td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
</tr>
</table>
DEMO
Maybe some ideas why this happens or how to solve the issue?
Outlook will ignore height on empty table cells, it's minimum height is about 10px. You can add a non breaking space and this will look empty but satisfy outlooks desire to always be awkward.
So I wanted to share the solution I found which works fine both in outlook and common email inboxes:
Basically I needed to nest table in a table to get this dark blue part in the middle which on lower than 600 resolution takes up 100% width. And I needed to add font size and invisible char , because otherwise outlook was making two lines instead of intended one line.
Using previously posted code and adding invisible chars between <td></td> tags and adding font size helped as well, but on mobile(lower than 600 resolution) these invisible chars were leaving small whitespaces from left and right, so dark blue was not taking whole width as wanted.
Code:
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
<tr class="preheader" style="background-color:#d8ebf6;">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
<tr>
<td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
DEMO
I appear to be getting a 1px white box around my tables in outlook 2007,10 and 13. Ive done border collapse and it hasn't fixed the issue? Want three 200px tables aligned horizontally, but because a 1px border is being applied it thinks they're more than 200px, therefore breaking the alignment. Tried everything so any suggestions appreciated.
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" width="600" bgcolor="#B6B6B6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#EE070B" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>1</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#1527EA" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>2</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#ED7407" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>3</td></tr>
</table>
</td>
</tr>
</table>
Outlook adds around 20px around Tables, no matter what. Not sure on the 1px border but try this hack to fool all Outlook versions into thinking your Tables are Table cells: http://labs.actionrocket.co/make_mobile_email_work_in_outlook