title: mjml align mj-wrapper background-position to the right
body: <p>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.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;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"&gt;
    &lt;mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px"&gt;
      &lt;mj-column&gt;
        &lt;mj-text color="#009f82" font-size="17px" font-weight="bold" padding="20px 0 40px 0"&gt;
            Lorem Ipsum,
        &lt;/mj-text&gt;
        &lt;mj-text&gt;
            Lorem Ipsum 2
        &lt;/mj-text&gt;
      &lt;mj-text&gt;
            Lorem Ipsum 3
        &lt;/mj-text&gt;
      &lt;/mj-column&gt;
    &lt;/mj-section&gt;
    &lt;mj-section border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px" border-bottom="1px solid #aaaaaa"&gt;
      &lt;mj-column border="1px solid #dddddd"&gt;
        &lt;mj-text css-class="hero-style" padding="20px"&gt; First line of text !! &lt;/mj-text&gt;
        &lt;mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" padding="0 20px" /&gt;
        &lt;mj-text padding="20px"&gt; Second line of text &lt;/mj-text&gt;
      &lt;/mj-column&gt;
    &lt;/mj-section&gt;
  &lt;/mj-wrapper&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have tried with:</p>
  
  <pre><code>&lt;mj-class name="hero" text-align="right" text-align="right" background-color="yellow" background-position="top right" /&gt;
  </code></pre>
  
  <p>And with:</p>
  
  <pre><code>    &lt;/mj-attributes&gt;
  &lt;mj-style inline="inline"&gt;
      .hero-style {
          text-align: right;
          background-color: red;
          color: red;
          background-position: top right;
      }
  &lt;/mj-style&gt;
  </code></pre>
  
  <p>But it doesn't work. Any help?</p>