mjml-section-bg-img

1.0.3 • Public • Published

mjml-section-bg-img

Sections are intended to be used as rows within your email. They will be used to structure the layout.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section full-width="full-width" background-color="red">
        <!-- Your columns go here -->
      </mj-section>
    </mj-container>   
  </mj-body>
</mjml>

sexy

The full-width property will be used to manage the background width. By default, it will be 600px. With the full-width property on, it will be changed to 100%.

Inverting the order in which columns display: set the `direction` attribute to `rtl` to change the order in which columns display on desktop. Because MJML is mobile-first, structure the columns in the order you want them to stack on mobile, and use `direction` to change the order they display on desktop. Sections cannot be nested into sections. Also, any content in a section should also be wrapped in a column.

UPDATED: Windows 10 background image support.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section-bg-img background-image="image.jpg" background-color="#333333" background-width="600" background-height="600">
        <!-- Your columns go here -->
      </mj-section>
    </mj-container>   
  </mj-body>
</mjml>
attribute unit description default value
full-width string make the section full-width n/a
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-right string css border format n/a
border-top string css border format n/a
border-radius px border radius n/a
background-color color section color n/a
background-url url background url n/a
background-repeat string css background repeat repeat
background-size percent/px css background size auto
background-width px Outlook background size n/a
background-height px Outlook background size n/a
vertical-align string css vertical-align top
text-align string css text-align center
padding px supports up to 4 parameters 20px 0
padding-top px section top offset n/a
padding-bottom px section bottom offset n/a
padding-left px section left offset n/a
padding-right px section right offset n/a
direction string ltr / rtl ltr
css-class string class name, added to the root HTML element created n/a

Package Sidebar

Install

npm i mjml-section-bg-img

Homepage

mjml.io

Weekly Downloads

0

Version

1.0.3

License

MIT

Last publish

Collaborators

  • heidiolsen