Display a section with a background image and some content inside (mj-text, mj-button, mj-image ...)
<mjml>
<mj-body>
<mj-hero
mode="fixed-height"
height="469px"
background-width="600px"
background-height="469px"
background-url="image.jpg"
background-color="#2a3448"
padding="100px 0px">
<mj-text
padding="20px"
color="#ffffff"
font-family="Helvetica"
align="center"
font-size="45"
line-height="45px"
font-weight="900">
GO TO SPACE
</mj-text>
<mj-button href="https://mjml.io/" align="center">ORDER YOUR TICKET NOW</mj-button>
</mj-hero>
</mj-body>
</mjml>
Here is the following attribute you can use -
width the width of the hero container.mode specify how the height will be calculated. You can use only two value. One is fixed-height another is fluid-height. choose if the height is fixed based on the height attribute or fluid.height is the height of the hero. This is required if you are using fixed-height mode.
background-width the width of the background image.background-height the height of the background image.background-url the url of the background image.background-color the background of the Hero container.background-position background image position. The value consist of two keywords. Each keyword represent the position. You can use these keywords - top, center, bottom, left, bottom