Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with section background image in full width mode #2640

Open
vaishnavi-accountbox opened this issue Feb 24, 2023 · 3 comments
Open

Issue with section background image in full width mode #2640

vaishnavi-accountbox opened this issue Feb 24, 2023 · 3 comments

Comments

@vaishnavi-accountbox
Copy link

vaishnavi-accountbox commented Feb 24, 2023

Hi MJML Team,

I am trying to use full width section with background image. It works fine in gmail client. But it was distracted in outlook client.

Below is the mjml snippet

<mjml>

    <mj-body width="600px">

        <mj-section full-width="full-width" background-url="https://s3.amazonaws.com/ebuploads2/uploads/1565617538403-a.jpg">
    
      <mj-column width="100%">
        <mj-divider border-width="1px" border-style="dashed" border-color="black" width="100%" />
        
        <mj-text font-family="Helvetica" color="#F45E43">
          <h1>Title</h1>

          <p>Paragraph</p>
          <p style="font-family:Comic Sans Ms">Another paragraph</p>
        </mj-text>
        
      </mj-column>
    </mj-section>
    
  </mj-body>
  
</mjml>

Here is the screenshot how it is appear on outlook client https://snipboard.io/t58Mp4.jpg

@iRyusa
Copy link
Member

iRyusa commented Feb 27, 2023

I think we never found out why it behave like that on Outlook, VML looks fine for us but it doesn't behave as we expect. We should maybe remove full width support for background image as it doesn't really work

@vaishnavi-accountbox
Copy link
Author

It is working fine on outlook client, But issues is with windows default mail with outlook email.

@iRyusa
Copy link
Member

iRyusa commented Feb 28, 2023

If I remember, you should add a background-color to fallback to it on unsupported clients.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants