I'm developing a section for an e-mail with an pattern background and an image overlapping the pattern, and I got it working:

It loads okay in all e-mail clients, but outlook (as usual) renders the PATTERN (blue image) in different ways every time you open the e-mail:

1. Loads entire pattern
2. Loads part of it, and after a few seconds load everything
3. Takes a lot of time to load
4. Does not load the pattern at all
   • If you try to forward the e-mail and discard the forwarding, the pattern loads in the original e-mail

The other front image loads normally, probably because it's an img tag.

I can't give up on v:fill because I need the overlap. That's how the code is now:

<table border="0" cellpadding="0" cellspacing="0" wi dth="100%">
  <tbody>
    <tr>
      <td
        background="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png"
        height="339px"
        style="background-size: 113px 339px;
        background-repeat: no-repeat;"
        valign="top">

        <!--[if mso]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="t" stroked="false" stroke="false" width="316" height="339" style="width:316px;height:339px;">
            <v:fill src="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png" origin="-0.5,-0.5" position="-0.5,-0.5" size="84pt,254pt" sizes="84pt,254pt" type="frame" />
            <v:textbox inset="0,0,0,0">
        <![endif]-->
      <table width="100%">
            <tbody>
          <tr>
                <td style="padding: 46px 0 0 60px;"><img  height="248" src="https://a.cdn-hotels.com/gdcs/production169/d636/03254867-7781-42d4-84f3-aca7aed4bdaa.jpg" style="width: 256px; height: 248px; object-fit: cover;" width="256"></td>
              </tr>
            </tbody>
          </table>
        <!--[if mso]>
          </v:textbox>
          </v:rect>
        <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

Tried changing the url where images are stored, and basically guessing where the problem is because I don't even know why there is a problem in the first place. I expected the pattern to load the same way the front image loads.

CodePudding user response：

I've seen this happen more than once, and I really don’t know what’s going on. Another thing that did trigger the image load for me was resizing the window or opening the email in its own window. This looks like an Outlook/Word engine bug. And I don't think there's a proper solution for it.

One thing I did when this happen though is change VML used. Instead of using a <v:rect> with a fill and a textbox, I've used a <v:image> instead. Based on your code it would look something like this:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td
        background="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png"
        height="339px"
        style="background-size:113px 339px;
        background-repeat:no-repeat;"
        valign="top">
        <!--[if mso]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" style="position:absolute; width:113px; height:339px; top:0; left:0; z-index:1;" src="https://i.ibb.co/K7pf9Nk/5-Sky-blue-texture-3.png" />
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" style="position:absolute; width:316px; height:339px; top:0; left:0; z-index:2;">
        <![endif]-->
        <table width="100%">
          <tr>
            <td style="padding:46px 0 0 60px;"><img  height="248" src="https://a.cdn-hotels.com/gdcs/production169/d636/03254867-7781-42d4-84f3-aca7aed4bdaa.jpg" style="width:256px; height:248px; object-fit:cover;" width="256"></td>
          </tr>
        </table>
        <!--[if mso]>
        </v:shape>
        <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

Here’s a test in Email on Acid in The Outlooks on Windows.

I learnt this from an old post from 2011 (unfortunately no longer available but visible on archive.org).