Search code examples
emailoutlooknewslettermjml

mjml align mj-wrapper background-position to the right

I'm trying without succes to align the background-position for an mj-wrapper to the right but I don't know how to do it.

Here is my code:

<mj-wrapper mj-class="hero" border="1px solid #000000" padding="50px 30px" background-url="https://i.picsum.photos/id/873/214/135.jpg" background-repeat="no-repeat">
  <mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px">
    <mj-column>
      <mj-text color="#009f82" font-size="17px" font-weight="bold" padding="20px 0 40px 0">
          Lorem Ipsum,
      </mj-text>
      <mj-text>
          Lorem Ipsum 2
      </mj-text>
    <mj-text>
          Lorem Ipsum 3
      </mj-text>
    </mj-column>
  </mj-section>
  <mj-section border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px" border-bottom="1px solid #aaaaaa">
    <mj-column border="1px solid #dddddd">
      <mj-text css-class="hero-style" padding="20px"> First line of text !! </mj-text>
      <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" />
      <mj-text padding="20px"> Second line of text </mj-text>
    </mj-column>
  </mj-section>
</mj-wrapper>

I have tried with:

<mj-class name="hero" text-align="right" text-align="right" background-color="yellow" background-position="top right" />

And with:

    </mj-attributes>
<mj-style inline="inline">
    .hero-style {
        text-align: right;
        background-color: red;
        color: red;
        background-position: top right;
    }
</mj-style>

But it doesn't work. Any help?

Solution

  • Simply just add it as an attribute to <mj-wrapper />:

    <mj-wrapper 
 background-position="right"
 background-url="https://i.picsum.photos/id/873/214/135.jpg" 
 background-repeat="no-repeat"
>
...
</mj-wrapper>

    Note, there are could be some limitations/issues in outlook. I am not sure. Follow the link to see the whole list (scroll bottom): https://www.npmjs.com/package/mjml-wrapper

    P.S.: works for MJML version @^4.7.