Mjml-section-bg-img NPM

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>

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%.

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

mjml background-image responsive email

@everything-registry/sub-chunk-2180 @infinitebrahmanuniverse/nolb-mj @zalastax/nolb-mj

7 years ago

7 years ago

7 years ago

7 years ago