Mso Faux Absolute Generator for Outlook

Create accessible background image on Outlook without VML !

Your Image Url

Email width

Your text

Text align

Background color ?

Background-color :

Text color

Frame/text box Width

font size :

font family :

Text block Top Bottom Padding

Text block Left/Right Padding

Text block top position

Add the following right after the opening <body> tag…

This tool uses mso properties to create a bulletproof and accessible background image on Outlook. No VML here. The mso-element-wrap and mso-element-left properties create frames. For this to work, you need to avoid nesting the frame inside tables. You can use tables before and after the block, but if you place it inside a table, the properties won't work anymore. If you're coding with divs, just avoid using conditional comments around the frame.

If you want to add a CTA link inside the frame, use the pedantic semantic button from GoodEmailCode,This is the one that will work best. You can use my generator !

Do not hesitate to consult my github page on the subject.

The sample text is there to serve as a visual aid for adjusting content position.

you can learn how to make everything responsive, by looking at this codepen