Clickable background image in email - Outlook issue

Question

I'm using the bulletproof method to overlay some text ontop of an image so it looks like this:

My code is as follows (not sure why image doesn't render in snippet, pasting html code in browser it will show):

<table>
    <tr>
        <td class="ppp-ideabooks__image" background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" bgcolor="#fff" style="width: 340px; height: 198px; vertical-align: bottom; padding: 0;">
           <!--[if gte mso 9]>
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:340px;height:198px;">
              <v:fill type="tile" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
              <v:textbox inset="0,0,0,0">
                 <![endif]--> <a class="ppp-ideabooks__link" href="#" style="display: block; width: 100%; height: 90%;"></a>
                 <p class="ppp-ideabooks__text" style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">
                    "COOL CARS"
                 </p>
                 <!--[if gte mso 9]>
              </v:textbox>
           </v:rect>
           <![endif]-->
        </td>
    </tr>
</table>

This works fine, but on Outlook it looks like this:

Does anyone know how to fix this issue for Outlook? Note that I'm trying to make the image clickable which is why I have the <a> tag inside as well...

Thanks!

Answer 1

I changed a few things around in your code and the result is at the bottom of this answer.

Basically you had the type as tile (<v:fill type="tile"). This will tile the image when the content inside the block is larger. Unless you have a background that is meant to be tiled, you suggest sticking to <v:fill type="frame".

I also added a table in the comments as paragraphs can use unwanted spaces (above and below the text) if CSS is not applied properly. First row is to space it out, second row has the text as a link.

Edit - Added the following:

• href to VML
• conditional space for Outlooks
• a span tag for green bar
• padding to href to make the whole block clickable

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="top" class="ppp-ideabooks__image" background="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" bgcolor="#fff" style="width: 340px; height: 198px; padding: 0;vertical-align: top;">
           <!--[if gte mso 9]>
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" href="http://www.google.com" fill="true" stroke="false" style="width:340px;height:198px;">
              <v:fill type="frame" src="http://www.autointell.com/News-2014/August-2014/toyota-ft-1-sports-concept.jpg" color="#fff" />
              <v:textbox inset="0,0,0,0">
                 <![endif]--> 
            
                <table border="0" cellpadding="0" cellspacing="0">
                    <!--[if gte mso 9]>
                    <tr>
                        <td style="height:171px;"></td>
                    </tr>
                    <![endif]-->
                    <tr>
                        <td class="ppp-ideabooks__text" style=""><a class="ppp-ideabooks__link" href="#" style="display: inline-block;box-sizing: border-box; cursor: pointer; text-decoration: none;padding: 170px 204px 0px 0px;">
                         
                            <span style="display: inline-block; margin: 0; padding: 5px 12px; background-color: #4dbc15; color: #000; letter-spacing: 1px; font-size: 15px; font-family: HelveticaNeueMedium,HelveticaNeue-Medium,'Helvetica Neue Medium',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;">"COOL CARS"</span></a>
                         </td>
                    </tr>
            </table>
                 <!--[if gte mso 9]>
              </v:textbox>
           </v:rect>
           <![endif]-->
        </td>
    </tr>
</table>

How the above code renders in Litmus (Feb/2019)

Hope this is the answer you were after.