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). 2 of these elements are clickable. 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!

edit: added the requirement that 2 of the elements on top of the image are clickable.

[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" />

[domvillegas-ui]

Thanks for your time! Unfortunately, this approach doesn't work for my requirements because there are multiple clickable elements on top of the image. If there was only one possible href, then this would work. Thanks for your time though.

I updated the description of the discussion to make it more clear.