Search code examples
htmloutlookhtml-emailemail-templates

Email Design: Text over background image

Am am trying to create a header for an email that has a background image and text centered over it. This is how it looks in "normal" email clients:

enter image description here

However in outlook it doesn't quit work, it ends up like this:

enter image description here

Are there any email gurus that can help me fix this?

Here is what I have so far (built in react):

<table width="640" cellPadding="0" cellSpacing="0" align="center" style={{ margin: '0 auto' }}>
    <tbody>
    <tr>
        <td
            height="143"
            width="640"
            align="center"
            valign="middle"
            background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
            style={{ backgroundColor: '#00A699', backgroundSize: 'cover' }}
        >
            <div
                dangerouslySetInnerHTML={{
                    __html: `<!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
                          <v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
                          <v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
                          <![endif]-->`,
                }}
            />
            <table
                cellPadding="0"
                cellSpacing="0"
                className="arb_w100 "
                align="center"
                style={{ margin: '0 auto' }}
            >
                <tbody>
                <tr>
                    <td align="center">
                        <td
                            align="center"
                            valign="bottom"
                            className="arb_headline_1"
                            style={{ paddingTop: '10px' }}
                        >
                                            <span
                                                style={{
                                                    fontSize: '22px',
                                                    fontWeight: 400,
                                                    fontFamily: 'Helvetica, Arial, sans-serif',
                                                    lineHeight: '28px',
                                                    color: '#ffffff',
                                                }}
                                            >
                                                For a limited time, take
                                            </span>
                        </td>
                    </td>
                </tr>
                </tbody>
            </table>
            <div
                dangerouslySetInnerHTML={{
                    __html: `<!--[if gte mso 9]>
                          </v:textbox>
                        </v:rect>
                      <![endif]-->`,
                }}
            />
        </td>
    </tr>
    </tbody>
</table>

Below is the code from above translated to standard HTML:

<table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
    <tbody>
    <tr>
        <td height="143" width="640" align="center" valign="middle"
            background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg"
            style="background-color:#00A699;background-size:cover">
            <div><!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
                          <v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
                          <v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
                          <![endif]--></div>
            <table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
                <tbody>
                <tr>
                    <td align="center">
                        <td align="center" valign="bottom" className="arb_headline_1" style="padding-top: 10px;"><span
                            style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
                        </td>
                    </td>
                </tr>
                </tbody>
            </table>
            <div><!--[if gte mso 9]>
                          </v:textbox>
                        </v:rect>
                      <![endif]--></div>
        </td>
    </tr>
    </tbody>
</table>
Solution

  • Thanks for supplying the final HTML, that helped a lot!

    So you've got a couple of issues with your final HTML.

    1. You have divs wrapping each of the MSO snippets which essentially closes off and breaks the snippets. So remove the closing div tag for the first MSO snippet and the opening div tag for the second snippet.
    2. You'll need need to shift these two tags in, so it is only wrapping your inner content. We usually add a div to wrap the inner content to help reset the HTML in Outlook and then we can set whatever styles etc in the inner content.
    3. I then noticed you've got a double up of the inner tags. Remove the outer tags as they don't have any styles declared, whereas the inner one does.

    Amending those small things will fix your issue.

    Here is the snippet cleaned up in case my instructions don't make sense:

    <table width="640" cellPadding="0" cellSpacing="0" align="center" style="margin:0 auto">
<tbody>
    <tr>
        <td height="143" width="640" align="center" background="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" style="background-color:#00A699;background-size:cover">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:143px">
            <v:fill type="frame" src="https://image.shutterstock.com/image-illustration/website-header-banner-design-abstract-260nw-1621024345.jpg" />
            <v:textbox inset="0,0,0,0" style="v-text-anchor:middle">
            <![endif]-->
            <div>
            <table cellPadding="0" cellSpacing="0" className="arb_w100 " align="center" style="margin:0 auto">
                <tbody>
                    <tr>
                        <td align="center" className="arb_headline_1" style="padding-top: 10px;"><span style="font-size: 22px; font-weight: 400; font-family: Helvetica, Arial, sans-serif; line-height: 28px; color: rgb(255, 255, 255);">For a limited time, take</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!--[if gte mso 9]>
            </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</tbody>
</table>