Mjml: Hero background does not display in outlook 2016

[crashworx]

Describe the bug
The hero background does not display in outlook2016

To Reproduce
Steps to reproduce the behavior:
using

<mj-hero background-color="#f1f2f5" background-url="https://www.abcdefg.com/img-email/banner-help.png" padding="20px" background-height="220px">
Expected behavior
Expect the hero image to be displayed in outlook 2016. It isn't.

MJML environment (please complete the following information):
Using version 4.3.0 in the try it live editor.

Email sending environment(for rendering issues):

• piping html through a java based email service. Custom code.

Affected email clients (for rendering issues):
Outlook 2016

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Can't reopen item #1526, however this is the exactly the same behaviour called out there.

[iRyusa]

Hi,

Can you try with putsmail.com and send us the result ?

I get a 404 when trying to access the given image, can you attach it here?

[crashworx]

sorry, i changed the domain deliberately ..

Screen shots attached - sent through putsmail.com

this is in gmail:

this is in outlook:

[crashworx]

note the second banner at the bottom is a background on a section, as opposed to a hero tag.

[iRyusa]

You can just drag the background here so we can try to reproduce & see what's going on

[crashworx]

[crashworx]

there you go mate. hope that helps.

[iRyusa]

Adding a background-width to 600px on the mj-hero look to solve the issue, @kmcb777 the doc state that the background-width should take the size of parent mj-body, can we patch this for the 4.4 release ?

[crashworx]

actually it looks like you need to have BOTH background-width and background-height set to resolve the issue.

if you remove either of them, the issue appears.

[kmcb777]

@iRyusa background-width will default to container width now
background-height is still mandatory because we can't guess the ratio otherwise
it's ok for fixed-height but fluid-height doesn't seem possible on outlook with this vml method, the method used by mj-section seems the only way, so maybe we should drop fluid-height mode, since mj-section does the same ?

[m-kaddatz]

hey, i found a little hack to solve this issue. In the vml tags, you have to play with these attributes:

origin="0.5, 0" position="0.5, 0"

after some tests, its gonna work with (depends also on image-size):

origin="1, 0" position="1, 1"

Additionally, you also have to remove the background-color #fffff on the next couple div tags.

<!--[if mso | IE]>

<table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:630px;" width="630" >
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<v:rect style="width:630px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false">
<v:fill origin="0.5, 0" position="0.5, 0" src="image.jpg" color="#ffffff" type="tile" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="background:#ffffff url(image.jpg) top center / auto no-repeat;Margin:0px auto;max-width:630px;">
<div style="line-height:0;font-size:0;">
<table align="center" background="image.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff url(image.jpg) top center / auto no-repeat;width:100%;">

[krystof-k]

Facing similar issue when hero is in wrapper with background color – the background color overlays the background image.

Probably found out why: z-index:-3; in the IE section.

See #1671.