Hello,

I'm being tasked to come up with an email template that they wanted to use. In the concept design spec sheet, it showed what seems to be an overlapping element on the seams of 2 separate elements, shown below:

Overlay example

(I assumed it's 2 table cells, with 1 image overlaid on the seams of the two cells.)

I tried to come up with an HTML code template for use that works on Gmail, Yahoo! Mail, and Outlook 2010/2012/2013/2016, but it doesn't seem to work well when the goal is about making elements overlap 2 separate elements. If anyone else can make it work, please let me know and post below so everyone can benefit from this.

Using Google logo for examples. Feel free to use the template for your own needs (MIT Licensed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta name="x-apple-disable-message-reformatting">
    <custom name="opencounter" type="tracking" />
    <title>&nbsp;</title>
    <style>
        * {
            text-size-adjust: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -webkit-font-smoothing: antialiased;
        }

        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        .flexibleWidth {
            width: 600px;
            /* Outlook needs this. */
            min-width: 600px;
            max-width: 600px;
        }

        .ExternalClass * {
            /* Yahoo! Mail stuffs */
            line-height: 100%;
        }

        img {
            text-decoration: none;
            border: 0;
        }

        .hide_br br {
            display: none;
        }
    </style>
</head>


<body style="width:100%;text-align:center;margin:0;table-layout:fixed;text‑size‑adjust:100%;display:table !important">
    <style>
        * {
            text-size-adjust: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -webkit-font-smoothing: antialiased;
        }

        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        .flexibleWidth {
            width: 600px;
            /* Outlook needs this. */
            min-width: 600px;
            max-width: 600px;
        }

        .ExternalClass * {
            /* Yahoo! Mail stuffs */
            line-height: 100%;
        }

        img {
            text-decoration: none;
            border: 0;
        }

        .hide_br br {
            display: none;
        }
    </style>

    <!-- Preheader text from Litmus. -->
    <div style="display:none;mso-hide:all;width:0;height:0;max-width:0;max-height:0;font-size:0;line-height:0">
        EXAMPLE DISCLAIMER. PLEASE MODIFY THIS DISCLAIMER FROM TEMPLATE.
    </div>
    <!-- End of preheader text. -->

    <!-- Table Wrapper -->
    <table border="0" cellpadding="0" cellspacing="0" class="flexibleWidth" style="width:654px;max-width:654px;background:#ffffff;text-align:center;margin:0 auto;table-layout:fixed;border:none;font-family:Arial">
        <tr>
            <td style="background:#f4f4f4;width:100%;text-align:center;margin:0 auto;table-layout:fixed;padding:0">
                <!-- Main Body -->
                <table border="0" cellspacing="0" cellpadding="0" bgcolor="#fff" style="background:#fff;text-align:center;width:100%;font-family:Arial;font-size:100%;table-layout:fixed;margin:0 auto">
                    <!-- Disclaimer text at top -->
                    <tr>
                        <td style="background:#fff;text-align:center;margin:0 auto;width:100%">
                            <p style="margin:0 auto;font-size:12px;line-height:16px;text-align:center"> Having problems viewing this email? View the 
                                <a href="https://some_link.com/" style="text-decoration:none;color:#2196f3">web version</a><br> If you do not want to receive emails from Litmus, <a target="_blank" href="https://some_link.com" style="text-decoration:none;color:#2196f3">unsubscribe</a>.
                            </p>
                            <!--[if !mso]> <!-- -->
                            <br />
                            <!--<![endif]-->
                        </td>
                    </tr>
                    <!--[if mso]>
                    <tr>
                        <td height="20" style="line-height:2.0pt;font-size:2.0pt;height:20px;">
                            &nbsp;
                        </td>
                    </tr>
                    <![endif]-->
                    <!-- End of disclaimer text at top -->




                    <!-- This is Element 2, from the concept art above. -->
                    <tr>
                        <td style="border:1px solid #d2d2d2;background:#f4f4f4;padding:20px">
                            <table border="0" cellspacing="0" cellpadding="1" bgcolor="#fff" style="background:#fff;text-align:center;width:100%;font-family:Arial;font-size:100%;table-layout:fixed;margin:0 auto">
                                <tr>   
                                    <td style="background:#fff;text-align:center;margin:0 auto;width:100%;border-bottom:1px solid #f4f4f4">
                                        <img src="https://i.imgur.com/5M536DQ.png" alt="some_name" style="width:153px;max-width:153px;display:block" height="60" width="153">
                                    </td>
                                </tr>
                                <tr>
                                    <td bgcolor="#fff" style="background:url(https://i.imgur.com/K5pYfi7.jpg) no-repeat center;text-align:center;vertical-align:bottom;margin:0 auto;width:100%;border-bottom:1px solid #f4f4f4" width="600" height="360">
                                        <!--[if gte mso 9]>
                                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:360px;height:360px;position:absolute;mso-position-horizontal:center">
                                            <v:fill type="frame" src="https://i.imgur.com/K5pYfi7.jpg" color="#fff" />
                                            <v:textbox inset="0,0,0,0" style="mso-fit-text-to-shape:false;v-text-anchor:bottom;mso-position-horizontal:center">
                                        <![endif]-->
                                        <table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
                                            <tr>
                                                <td style="text-align:center;width:100%;vertical-align:bottom;padding:0 0 50px 0">
                                                    <img src="https://i.imgur.com/5M536DQ.png" width="140" height="70" style="width:140px;height:70px;margin:0 auto;text-align:center">
                                                </td>
                                            </tr>
                                        </table>
                                        <!--[if gte mso 9]>
                                            <p style="margin:0;mso-hide:all">
                                                <o:p xmlns:o="urn:schemas-microsoft-com:office:office">&nbsp;</o:p>
                                            </p>
                                            </v:textbox>
                                            </v:rect>
                                        <![endif]-->
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>

                        </td>
                    </tr>

                </table>
                <!-- End Main Body -->
            </td>
        </tr>
    </table>
    <!-- End Table Wrapper -->

    <img src="https://some_link.com" style="width:0 !important;font-size:0 !important;display:none;visibility:hidden;color:#FFFFFF;overflow:hidden;margin:0 auto" />
</body>

</html>