Seeking help: images not rendering on Windows 10 version of Outlook.

[domvillegas-ui]

Thanks for your time!

I have a few elements I need to display on top of an image (an icon, a link, and a header). Because position:absolute can't be used on all clients, I decided to add a background image to react-email's Container (I've also tried using Section).

   <Container
     style={{
       backgroundImage: "url("the-url")",
     }}
   >
   // elements that exist in front of the image
   </Container

Besides the Windows 10 versions of all Outlook clients, the above approach works. In Litmus I can see the children 3, but the background image doesn't render and, interestingly, definitions of height and width of Container (or Section) aren't applied.

Any ideas? Although a solution to the puzzle above would be great, I'm also open to a different approach entirely that would build what I need.

Thanks!

[gabrielmfern]

background-image is not supported by Desktop Outlook sadly, to get something like this to work, you'd need VML. What I can recommend you do is have all the content in the image itself instead of rendering in the HTML, if the content is dynamic you can render it into the image from your back-end with search params, so you'd have something like:

<Img src="https://api.my-app/such-image?data=something&other-data=something%20else" />