Email template - CSS background image & editable zones

Jasmin Dhaliwal asked on August 22, 2019 12:23

Hi DevNet community,

I'm currently redoing some email templates and would like to have a title which overlaps the banner image. Seeing as divs are still not supported by certain email clients, I've had to achieve the look with the following code:

<table border="0" cellpadding="0" cellspacing="0" height="200" style="background-image: url(https://picsum.photos/600/177 );background-repeat:no-repeat" width="600"> <tbody> <tr height="155"> <td style="background-image: url(/images/Logo_A4_RGB.png); background-repeat: no-repeat"> </td> </tr> <tr height="45"> <td style="background-image: url(/images/email_subject_bkgd.png); background-repeat: no-repeat; background-position: right;" width="100%"> </td> <td align="right" bgcolor="#e4002b" style="padding: 5px 20px; font-family: Arial, sans-serif;font-weight: bold;font-size:20px; color: #FFF;" width="100%">$$Emailtitle::$$</td> </tr> </tbody> </table>

I would however like the person who puts the email together to be able to choose from a selection of banner images in our media library, rather than me coding in a url and I was wondering if there is any way of making my background image one of those editable regions e.g. can I somehow use $$BannerImage::$$ or similar in my inline style style="background-image: url(https://picsum.photos/600/177 )?

Thanks,

Jasmin

   Please, sign in to be able to submit a new answer.