Background position about mjml HOT 10 CLOSED

Oh... My bad.
If I remember correctly it's because we doesn't find a way to support it on outlook so it's by default top center you're right..
I guess we can add it, but add a warning in the documentation

from mjml.

Hi @MichalCerny ,
Most of client doesn't support background-xxx attributes, so we're merging them into background who's almost supported everywhere ( outlook 20XX supports only VML ).

from mjml.

I know, I dont want support of position in build, I need to setup position in merged background because default is top center .. i need center right or center left.

from mjml.

And what about background color together with image?

from mjml.

I also would appreciate support for background-image with background-color on mj-section elements

from mjml.

Hey @MichalCerny @gabskoro, about background-image support with background-color, it was merged in 2.1.1.

The default top-center position still is an issue because of the lack of support in Outlook that @iRyusa explained.

from mjml.

Tnx :) 👍

from mjml.

With not enough support on background attributes ( like outlook/outlook.com & yahoo ) I am closing the issue. Feel free to reopen if needed !

from mjml.

@iRyusa
Without the ability to position the background, this is really a blocker for some layouts. Is there a hack to position the background anyway?

In this example we had to switch to graphics although it would be easy to solve with a background-position:left...

My approach would have been: Complete background graphic in 600px width and white text as content. Fallback = Section has background color as in the graphic so that the white text is readable even if the graphic is not loaded.
Problem: Does not work responsive because the background is positioned in the middle. On a smartphone, the white text then moves over the white part of the background. I guess it would work if the bg would be positioned left.

from mjml.

I think this could be done with a mj-table ( first td your text & second an image/css trick to do this shape ).

The support is still lacking so there's no really much to add here. You can play a bit with <mj-style inline="inline"> if you want to apply it manually, but you're on your own about the client fallback & support.

from mjml.