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

Question

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

Answer 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]-->