CODEWITHSUNDEEP
htmlcsshtml-email
Aaron
Aaron

Reputation: 11

HTML/CSS with text over image - EMAIL

I am trying to put text over an image however google seems to be stripping my <style> tag?

I would like the image to be displayed on the left, and have two text blocks over the image on the right (one higher and the other lower) Visually it looks right, however when I send to my Gmail account its rendering image, then below the image text a and text b with the style stripped out.

<style>
  .container {
    position: relative;
  }
  
  .text-blocka {
    position: absolute;
    top: 0px;
    right: 10px;
    left: 200px;
    text-align: right;
    color: #044C56;
    font-size: 32px;
    font-weight: bold;
    font-family: Arial;
    line-height: 150%;
  }
  
  .text-blockb {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: black;
    padding-left: 100px;
    padding-right: 20px;
    text-align: right;
    font-size: 24px;
    line-height: 120%;
  }
</style>
<div class="container">
  <img src="http://image.insights.invitae.com/lib/fe4215707564067f741774/m/1/8a2d8efe-96c0-4ad1-8a7c-2f7630a37dd4.png" alt="Test" style="width:50%;">
  <p class="text-blocka">Waiting for your Results? <br>They will be ready soon!
  </p>
  <p class="text-blockb">
    In the meantime, log in to <br>your portal account to:
  </p>
</div>

Upvotes: 0

Views: 1109

Answers (1)

Nathan
Nathan

Reputation: 5214

Position is not well supported in emails, so you'll have to do something else.

Essentially, you'll need to take a leaf from https://backgrounds.cm/ "Bulletproof Background Images", but I've never been able to get that working myself - but it's a start for something cross-email-compatible (notably, for Outlook desktops too). It was built a few years back, so, is a bit out of date.

For mine to work with Outlook, I had to change type="tile" to type="frame" in the <v:fill.../> (HT: Jason Meeker, https://litmus.com/community/discussions/4931-using-retina-images-as-background-images)

So here's what I came up with, for a responsive background image approach - you'll need to tweak it for your particular image, and, change the image width you are using to the width of the container (here, 600px)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- START HEAD v1-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!--<![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!--[if gte mso 9]>
            <xml>
                <o:OfficeDocumentSettings>
                    <o:AllowPNG />
                    <o:PixelsPerInch>96</o:PixelsPerInch>
                </o:OfficeDocumentSettings>
            </xml>
        <![endif]-->
        <style type="text/css">
            .text-blocka {
                text-align: right;
                color: #044c56;
                font-size: 32px;
                font-weight: bold;
                font-family: Arial;
                line-height: 150%;
            }
            .text-blockb {
                color: white;
                padding-left: 100px;
                padding-right: 20px;
                text-align: right;
                font-size: 24px;
                line-height: 120%;
            }
            @media screen and (max-width: 620px) {
                .responsive {
                    width: 100vw !important;
                    height: auto !important;
                    background-repeat: no-repeat !important;
                    background-size: cover !important;
                }
                .spacer {
                    margin-bottom: 150px !important;
                }
                .text-blocka {
                    font-size: 24px;
                }
                .text-blockb {
                    font-size: 18px;
                }
            }
            @media screen and (max-width: 420px) {
                .spacer {
                    margin-bottom: 50px !important;
                }
                .text-blocka {
                    font-size: 20px;
                }
                .text-blockb {
                    font-size: 16px;
                }
            }
        </style>
    </head>
    <!-- END HEAD -->
    <body style="margin: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; min-width: 100%; background-color: #ffffff;">
        <!-- START OUTER WRAPPER -->
        <center class="wrapper" style="width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
            <div class="webkit" style="max-width: 600px;">
                <!--[if (gte mso 9)|(IE)]>
                <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
                <tr>
                <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
                <![endif]-->
                <table
                    class="outer"
                    align="center"
                    style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; font-family: Arial, sans-serif; color: #333333; margin: 0 auto; width: 100%; max-width: 600px;"
                >
                    <!-- END OUTER WRAPPER -->

                    <td class="responsive" background="https://picsum.photos/id/237/600/500" bgcolor="#7bceeb" width="600" valign="top">
                        <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
                          <v:fill type="frame" src="https://picsum.photos/id/237/600/500" color="#7bceeb" />
                          <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                        <![endif]-->
                        <div>
                            <p class="text-blocka">
                                Waiting for your Results? <br />
                                They will be ready soon!
                            </p>
                            <p class="spacer" style="margin: 0 0 200px 0;">&nbsp;</p>
                            <p class="text-blockb">
                                In the meantime, log in to <br />
                                your portal account to:
                            </p>
                        </div>
                        <!--[if gte mso 9]>
                        </v:textbox>
                      </v:rect>
                      <![endif]-->
                    </td>

                    <!-- START OUTER WRAPPER -->
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </div>
        </center>
        <!-- END OUTER WRAPPER -->
    </body>
</html>

What the spacer class does with the margin is to help pad out the height of the <td>. The background fills the <td> so it needs to be a certain height (depending on the image and content). I've then added breakpoints to adjust the height downwards as we go into mobile phone territory and don't need so much height. You'll need to experiment to get the best results.

Maybe someone has a simpler approach - but I'm pretty sure their approach won't work across all most email clients. This one has been tested and works with Apple Mail; Outlook 2010, 2019 (Windows); Gmail Android; Gmail iOS; iPhone 11; Outlook Android & iOS; Samsung Mail Android; Gmail on Chrome; Outlook.com on Explorer; Yahoo on Firefox.

Nothing, however, works in Gmail IMAP on Android, and a couple of other less used ones, and in this case, the fallback colour #7bceeb shows (also you should inline the code for these cases).

Upvotes: 1

Related Questions