Background Images in Outlook

Forum|Forum|5 years ago
April 23, 2020
2 replies
6856 views

Hi all,

I'm trying to get a background image to work in Outlook emails (grr - naughty Outlook!)

Here is my code - it is pretty much a complete rip from https://backgrounds.cm/

<!-- START: Default Badged Full Width Image -->
          <tr class="mktoModule" id="mkto-default-badged-header" mktoAddByDefault="false" mktoName="Default Badged Header">
            <td background="https://dummyimage.com/600x300/AA4242/ffffff&text=Background+Image+600px+wide" bgcolor="#7bceeb" width="600" height="300" valign="top" >
              <!--[if gte mso 9]>
              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
              <v:fill type="tile" src="https://dummyimage.com/600x300/AA4242/ffffff&text=Background+Image+600px+wide" color="#7bceeb" />
              <v:textbox inset="0,0,0,0">
              <![endif]-->
              <div>
                <span>some test text</span>
              </div>
              <!--[if gte mso 9]>
              </v:textbox>
              </v:rect>
              <![endif]-->
            </td>
          </tr>
<!-- END: Default Full Width Image -->

I am across this post in my searches, and have made sure everything is set as per the resolution.

I'm still having no joy with background images showing up in Outlook.

Any thoughts?

Cheers

Jo

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Jo_Pitts1

Author

Community Advisor

All,

just bumping this to see if any one has any ideas.

Cheers

Jo

Dave_Roberts

Level 10

Hey Jo,

Try using this code for the top bit of the Outlook code:

 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:300px;">
<v:fill type="frame" src="https://dummyimage.com/600x300/AA4242/ffffff&text=Background+Image+600px+wide" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

It looks like the big difference here is the "type" attribute on the v:fill -- you could try using the "frame" property instead of the "tile". Here's a link to the Microsoft docs on the fill attribute: https://docs.microsoft.com/en-us/windows/win32/vml/type-attribute--fill--vml

Dave_Roberts

Level 10

and P.S. - the "bulletproof" buttons and background stuff that's out there on the internet isn't what it used to be. A lot has changed in the last few years and I don't think these tools have been kept up to accommodate newer applications and code changes (like gMail) -- buyer beware!

Jo_Pitts1

Author

Community Advisor

Dave, I've got it working - sort of. It works in my Outlook, but not the clients (not so great!).

in the clients Outlook, the background colour still shows instead of the image.

Any thoughts on what next?

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded