How to use background images in email branding

Questions
1

Hello,

I’m trying to use a background image in Okta delivered emails. Using email customization, when I include a background image via CSS, Okta strips out the declaration prior to sending the email. This is also visible in the preview feature but not in the source code - the source code remains intact.

Is there any secret to allow background images? I’ve tried data urls and even the background image from branding, but it seems Okta removes any url declaration it sees in the CSS.

I’ve also tried background on table components, since this document seems to suggest that is possible: Customize email notifications | Okta Developer

But even this is stripped:

            <table>
                <tr>
                    <td background="${brand.theme.logo}">Cell 1</td>
                    <td>Cell 2</td>
                </tr>
            </table>

Branding emails has been quite a challenge. Mail client support alone is hard to deal with. Okta changing my syntax without warning me has lead me down a path of blind trial and error. I do wonder why Okta strips content out of these email templates before sending.

Thanks!
Kyle

2

I do not know if there is a possibility to modify <tr> tag to have a background, cause even if provided background styling seems to be ignored. However, you can try and wrap your email in a <div> tag and add <img> tag at the top with corresponding style. Your template would look like this:

<div>
  <img src="https://your_image_url" style="position: absolute; top: 0; left: 0; z-index: -1" />
  <table>
    Your email body
  </table>
</div>
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.