Create a Discussion

#EmailHacks Ideas & Collaborators

Kevin Mandeville posted 2017-06-15 07:32:16

Hey all!

Litmus Live has a brand new session this year called #EmailHacks to debut innovative, never-before-seen email hacks or side projects.

Learn more about #EmailHacks here →

Have an idea but don’t have the technical know-how to implement? Or are you looking to team up with others? This is the official thread for pitching ideas amongst each other and teaming up with others for your email hacks and projects.

If you have any questions, please don't hestitate to ask - happy to help and connect y'all any way we can!

Digital Marketing replied 2017-03-02 15:57:06

How do you control Background images not sqishing in Outlook. To make mobile versions friendly, we use a longer background image, but in Outlook it displays the whole image now matter how squished. Here is my code. How do you get around this?


<!-- BPP -->
<table bgcolor="#000000" width="100%" height="100%" style="border-spacing:0;Margin:0 auto;max-width:600px;">
    <tr>
        <td width="100%" background="#" valign="top" style="padding:0;display:inline-block;background-repeat:no-repeat;background-position:top center;background-size: 100% auto, auto;">

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:180px;">
<v:fill type="frame" src="#" color="#000000"/>
<v:textbox inset="0,0,0,0">
<![endif]-->

    <div>
        <div style="font-size:0;">
            <table width="100%" bgcolor="#000000" style="border-spacing:0;opacity:0.7;" class="100">
                <tr>
                    <td height="20" style="padding:0;font-size:0;line-height:20px;">&nbsp;</td>
                </tr>
                <!-- Content -->
                <tr>
                    <td height="25" style="padding:0;font-size:0;line-height:25px;">&nbsp;</td>
                </tr>
            </table>
        </div>
    </div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--> 

        </td>
    </tr>
</table>

Reply to Digital Marketing

Jason Meeker replied 2017-03-02 20:42:09

Switch your fill type to "tile" and that should solve your problem provided the image you're using is 600px wide. As far as I know there isn't an attribute in the vml markup to indicate whether a tiled fill should be repeated or not so if your image width is less than 600px it's going to get repeated. Any background image that is wider or taller than the defined rect size will just be cropped.

-1

Kevin George replied 2017-03-02 08:01:28

Hi Kevin,

That is an amazing idea.

I would also like to participate in something new solution/stuff and new way to build & integrate with the HTML.

We have established a new code for the Windows 10 mail background image, below is the link to the blog.
http://www.emailmonks.com/blog/email-coding/background-image-supports-windows-10-mail-app/

Let me know any query about this stuff, we would love to contribute more!

Thanks
Kevin

Reply to Kevin George

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

#EmailHacks Ideas & Collaborators

Sign in to Community

Join the Litmus Community

Sign up to Community

Forgot password