I am using pthon mjml (https://pypi.org/project/mjml/) to convert mjml to html but converted html is not able to render background image in out look
- mjml code
<mj-section
background-position="bottom right"
padding-top="0px"
padding-right="25px"
padding-bottom="0px"
padding-left="25px"
background-color="#f7f7f7"
background-url="{{ static_url }}images/email_result_summry_bg.svg"
background-repeat="no-repeat"
>
- converted html
<div style= "background:url('https://purple.insightloupe.com/static/images/context-bg.jpg') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;margin:0px auto;max-width:600px">
<div style= "line-height:0;font-size:0">
<table align= "center" background= "https://purple.insightloupe.com/static/images/context-bg.jpg" border= "0" cellpadding= "0" cellspacing= "0" role= "presentation" style=
"width:100%;background:url('https://purple.insightloupe.com/static/images/context-bg.jpg') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover">
- when i am removing background image it is working fine but i could not remove background image
1
The following code works in MJML:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-section
background-position="bottom right"
padding-top="0px"
padding-right="25px"
padding-bottom="0px"
padding-left="25px"
background-color="#f7f7f7"
background-url="https://via.placeholder.com/600x300/ff0000"
background-repeat="no-repeat"
>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
</mj-section>
</mj-column>
</mj-section>
</mj-body>
</mjml>
So the problem is with the Python MJML program. That should be fixed.
You would be expecting this sort of output for Outlook Windows to work:
<!--[if mso | IE]>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#f7f7f7" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
<v:fill origin="0.5, 0" position="0.5, 0" src="https://via.placeholder.com/600x300/ff0000" color="#f7f7f7" type="tile" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
0