Background Images in Outlook

[Jo_Pitts1]

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

[Jo_Pitts1]

All,

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

Cheers

Jo

[Dave_Roberts]

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]

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]

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?

[Dave_Roberts]

Are there other images on the email that ARE showing up in the client's inbox? Maybe they've got images turned off by default or something other like that? I've heard about issues (specifically w/ Outlook) with the end-user setup, there's a bunch of different config options and sometimes it's a user's settings or a company-wide setting that's running interference. 

I can't think of a scenario to explain why you'd get something in your Outlook that was showing the image but it "didn't work" in Outlook, it's usually a case of an issue on the client-side with some settings. You might ask them to use a different account or find someone who also uses Outlook to test this -- most times it's an organization-wide issue with Outlook so asking your cube-mate might not be any different than checking it yourself. 

It's been a while since I built/tested email stuff but I'd always rely on Litmus (or nowadays we use Email on Acid) as a source of truth for this kind of stuff and show it working in that context. 

[Jo_Pitts1]

Thanks Dave... I'll give that a try ASAP!