Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Background image repeats on Gmail (Android)

Kaartje2go

Newbie
Total Posts:  4
Posted: 30 November 2016 12:09 AM

Hi,

I would like to add a full-width spacer with a background image to my email template.
This background is generated with http://www.backgrounds.cm.

It is working in most email clients, but it looks like Gmail is shrinking the background image (http://i.imgur.com/q1LltnK.png) (see attachment).

Link to EmailOnAcid test: https://www.emailonacid.com/app/acidtest/display/summary/AyvcZD6rdsym5YVxFsypKdlCKHw8QJDXXN3dgGKHaGe8k/shared

Does someone know if this rendering issue can be fixed? Thanks! smile

So far I have the following code:

<!DOCTYPE html>
<
html >
<
head>
    <
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
meta http-equiv="Content-Transfer-Encoding" content="quoted-printable" />
    <
meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <
meta name="format-detection" content="telephone=no" />
    <
meta name="x-apple-disable-message-reformatting">

    <!--
[if !mso]><!-->
    <
meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<!
[endif]-->
</
head>
<
body style="margin: 0; padding: 0;">

<!-- 
Spacer -->
<
table class="wrapper" cellpadding="0" cellspacing="0" border="0" width="100%">
    <
tr>
        <
td background="http://i.imgur.com/cSg08Ef.png" height="5" bgcolor="#FF9B00" valign="top" style="line-height: 5px;">
            <!--
[if gte mso 9]>
            <
v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:5px;">
                <
v:fill type="tile" src="http://i.imgur.com/cSg08Ef.png" color="#FF9B00" />
                <
v:textbox inset="0,0,0,0">
            <!
[endif]-->
            <!--
[if gte mso 9]>
            </
v:textbox>
            </
v:rect>
            <!
[endif]-->
        </
td>
    </
tr>
</
table>

</
body>
</
html
Image Attachments
Schermafbeelding 2016-11-30 om 08.06.05.png

 

Alex Ilhan

Avatar
Administrator
Total Posts:  226
Posted: 30 November 2016 06:32 AM
[ # 1 ]

Hi Kaartje2go,

Welcome back to the EoA forums!

I’ve had a look at this and believe I’ve fixed the issue. What I did was added an extra nested table inside your VML with a height and a   to force Gmail to not shrink it.

I’ve attached the fixed code for your smile

Let me know if you have any more issues.

Cheers,
Alex

File Attachments
background-fixed.html  (File Size: 2KB - Downloads: 141)