I have a image that I'd like to use as a horizontally-repeating banner with a non-white background color underneath in an HTML email, that also scales to fit the height. Although it is currently repeating, I cannot get the image to scale down properly. The header element is set to 100px, but the image does not resize and is cut off by the next element.
HTML
<body style="margin: 0; padding: 0;" >
<!-- CONTAINER TABLE (HEADER) -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;">
<tr>
<td align="center" bgcolor="#339969" style="padding: 0 0 0 0;">
<!-- HIDDEN PREHEADER -->
<div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
Some text.
</div>
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
<!-- HEADER -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- HERE need to properly scale then repeat this image -->
<td align="left"
background="img/large_christmasbanner.png"
background-size="contain"
alt="Bappy Bolidays!"
width="100%"
height="100">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
background-size="contain" is not a valid html attribute. Use this instead:
style="background-size: contain;"
Related
I'm working on an e-mail building tool and on e-mails received on Outlook, when I click the left border of the e-mail a white line appears below the clicked table.
The code is structured in this way:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: 0px auto;">
<tbody>
<!-- For each image: -->
<tr>
<td style="font-size: 0px; background-color: transparent;" valign="top" align="center">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0px; border-collapse: collapse; table-layout: fixed; margin: auto;" align="center">
<tbody>
<tr>
<!-- Other nested tables that are irrelevant since their -->
<!-- width is <= 600 and they have the same attributes -->
<td style="border: 0px;">
<a><img align="center" border="0" style="display: block; margin: 0px auto; height: auto; max-width: 560px; border: 0px !important; outline: none !important; text-decoration: none !important;" src="..." height="124" width="560"></a>
</td>
<!-- End nested tables -->
</tr>
</tbody>
</table>
</td>
</tr>
<!-- repeat code above for other images -->
</tbody>
</table>
How can I prevent that white line from showing up?
Is it possible to vertically align table 3 at the bottom in the following example?
This is for a mail signature, hence the use of tables and the hack with align to make the tables responsive (they'll stack underneath each other if viewport gets too small). Now, the client wants the logo in table 3 to be aligned at the bottom (see example image) and I'm beginning to wonder if this is even possible while keeping it mobile friendly.
I've tried vertical-alignment: bottom pretty much everywhere and margin-top: auto; margin-bottom: 0; on table 3 to no avail. I'm guessing the align="left" overrides pretty much ever vertical alignment styling I'm trying to make.
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;">
<tr>
<td>
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
You could use a vertical-align and give the cell a height using CSS.
#media (min-width: 1000px) {
.logoHolder td {
height: 50px;
vertical-align: bottom;
}}
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table class="logoHolder" align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;vertical-align: bottom;">
<tr>
<td style="vertical-align: bottom;">
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
I am writing an email which is only having issues in "Windows 10 Mail." I have a 3 table cell with a graphic in the middle TD. The left & right TDs contain a 2-pixel height table with a gray background. This is to make it look like the icon is surrounded by 2 gray lines.
The small tables all have height=2 applied. I've tried using VML code, no effect. Any ideas?
Results:
Code below:
<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px">
<tr>
<td valign="middle" width="35%" style="max-width: 108px; line-height: 0; font-size: 0">
<!-- Left Gray Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; max-height: 2px" height="2">
<tr>
<td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
</td>
</tr>
</table>
<!-- END Left Gray Table -->
</td>
<td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px">
</td>
<td valign="middle" width="35%" style="max-width: 108px;">
<!-- RIGHT Gray Table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 108px; min-height: 2px; max-height: 2px" height="2">
<tr>
<td height="2" bgcolor="#EAEAEA" style="height: 2px; background-color: #eaeaea; font-size: 0; line-height: 0"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/spacer.gif" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
</td>
</tr>
</table>
<!-- END RIGHT Gray Table -->
</td>
</tr>
</table>
For some reason the email client is making the height too high for the columns. Give this method a try to see how it goes.
<table cellpadding="0" cellspacing="0" border="0" width="300" style="max-width: 300px">
<tr>
<td valign="middle" width="35%" style="max-width: 108px; ">
<!-- Left Gray Table -->
<img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
<!-- END Left Gray Table -->
</td>
<td align="center" valign="middle" width="53" class="full-width-image" height="92"><img src="http://go.rocketlawyer.com/rs/148-CGS-511/images/icon-quick-answers.png" alt="Chat bubble icon" width="106" height="92" style="border-width:0;display:block;width:100%;max-width:53px;height:auto; max-height:92px">
</td>
<td valign="middle" width="35%" style="max-width: 108px;">
<!-- RIGHT Gray Table -->
<img src="https://i.stack.imgur.com/T24O6.png" height="2" width="100%" style="min-width: 74px; max-width: 108px; min-height: 2px; max-height: 2px; display: block">
<!-- END RIGHT Gray Table -->
</td>
</tr>
</table>
Tested in Outlook as well. What i have done is added a grey image with 1px height.
Hope this is what you were after.
I have am trying to figure out how to have 3 columns in a table row but hide the first or the last depending on whether it's mobile or desktop. My original thought was to add another TD to the bottom and hide one via css with media queries but that didn't seem to work very well.
Desktop view with alternating images
Mobile view which needs the picture with the lady with the graduation hat above the What is a beneficiary grey box.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center" valign="middle">
<td align="center" width="50%" class="column" valign="top" style="text-align:left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#44464a; line-height:1.4; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;"> <img class="person" src="c29229/c29229_4seasons_photos_2.jpg" alt="photo of people" style="width:300; height:auto; border:0 none; display:block;" /> </td>
<td align="center" valign="middle" width="50%" class="column" style="text-align:center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#ffffff; line-height:1.4; padding-top:0px; padding-right:30px; padding-bottom:0px; padding-left:30px; background-color: #ab811d;">
<h2 style="text-align:center; font-weight: normal !important; font-size: 24px; color:#ffffff; margin-bottom: 20px !important;">
<div class="spacer" style="padding-top: 40px; display:none;"> </div>
Complete your beneficiary designation
</h2>
<p style="margin-bottom:0px;">Vea esta correo electrónico en español</p>
</td>
</tr>
</table>
There is a way to do this without relying on media queries, if you'd like total coverage in all email clients. Using the dir attribute along with max-width, you can specify which <td> appears first on wide.
Start by laying out each table 2-column row in a mobile-first manner: The image in the first <td> and the text in the second. Because of the source order, when these layers stack the image will always be on top on the text. Once the column widths exceed their max-width, they'll stack without needing media queries.
This solves mobile, but how do you make some images appear in the right column on desktop? That's where dir comes in. Adding dir=rtl at the parent <td> causes containing elements to run in reverse. So the last column appears first.
Here is a basic example:
<tr>
<!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="http://placehold.it/200" width="300" height="" border="0" alt="" style="width: 100%; max-width: 300px; height: auto;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr"> <!-- Don't forget to switch dir to ltr here, or else text runs in reverse -->
Text Goes Here
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
If you layout each <tr> in a manner like this which the image in the first column, swapping the order of the columns in each row can be achieved by adding a dir=rtl to the parent <td>.
E-Mail-Clients are a bit tricky with their CSS.
You can order them the way you want them to be on mobile, and then add the following using for desktop:
position: relative;
left: -50%;
The remaining code depends on how you switch between two-column and one-column layout.
Most modern Mail programs support flexbox. With flexbox, you can re-order elements using the order property or by setting the direction to row-reverse.
I am trying to create a single page, will be used as a newsletter, so my code is html/css inline.
http://jsfiddle.net/Chamberja/6t9r14ew/
I want to add a background image behind that entire table so the logo and the text will appear in the foreground.
I have tried adding
style="background-image: url("bg.jpg")"
and
style= "background: url(bg.jpg)"
So the final code looks like
<table style="background: url(sportip.biz/alpha.jpg)" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding:10px 20px" class="center">
<img src="http://sportip.biz/nlsiplogo.jpg" alt="" border="0" />
</td>
</tr>
</table>
I think I am doing the in-line wrong.
I hope this is what you looking for:
<table style="background: url(sportip.biz/alpha.jpg)" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding: 10px 20px" class="center">
<img src="http://sportip.biz/nlsiplogo.jpg" alt="" border="0" />
</td>
</tr>
</table>
<!-- End Logo -->
<!-- Nav -->
<table style="position: absolute; margin-top: 0; margin-left: 0;" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #272727; font-weight: light; text-align: right; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: middle; padding:10px 20px; font-style:italic">
<b>Dear #name#,
Check out the latest releases of our magazines</b>
</td>
</tr>
</table>
Here's the fiddle.
jsfiddle.net/shanidkv/g0dd3vcm/1/
Find the updated JSfiddle code.
Note: Try to copy and past above url to browser facing some problem to attach link directly or on top of text
Many email clients do not support rendering a background image inside a table. See here for some examples of workarounds: http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth