Banner image alignment to the center | Community
Skip to main content
Andreea_Chirica
Andreea_Chirica
New Participant
April 16, 2018
Solved

Banner image alignment to the center

  • April 16, 2018
  • 2 replies
  • 6386 views

Hi. I am using the Flatiron email template. The problem I'm having is that I'd like to center the banner background image rather than left corner top. When trying to apply 'background: center', 'align: center', it centers the banner image on the Marketo editor, but when delivered as a sample on email, the properties aren't kept. It still moves the image to the left corner top (this was checked on both mobile and desktop devices). I'm using Gmail, but it was also checked on Apple mail, and mobile.

This is the current code:

<td class="background cornertop" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;border-top-right-radius: 0px;-webkit-border-top-left-radius: 0px;-moz-border-top-left-radius: 0px;border-top-left-radius: 0px;-webkit-border-top-right-radius:

0px;-moz-border-top-right-radius: 0px;background-color: #2ea7dc;width: 50%;height: 226px;background-repeat: no-repeat;background-position: bottom left;background:${heroBackgroundImage};background-image:${heroBackgroundImage};padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;border-collapse: collapse;background-color:${heroBackgroundColor}" height="226" background="${heroBackgroundImage}" bgcolor="${heroBackgroundColor}" valign="middle" width="640">

Could you advise on what code to use in order to be able to center the banner image on both desktop and mobile devices? Let me know if you require more details in order to understand the issue we're having.

Thank you.

Andreea

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by pavel_plachky

Put this CSS right before the closing </style> tag in the head section.

.background {

    background-size: 100% auto;

    background-repeat: no-repeat;

    background-position: bottom center;

}

Pavel

2 replies

Grégoire_Miche2
Grégoire_Miche2
New Participant
April 16, 2018

Background image positioning will not work on many email clients, starting with many outlook versions.

-Greg

pavel_plachky
pavel_plachky
New Participant
April 16, 2018

Change

background-position: bottom left;

to

background-position: bottom center;

Best regards,

Pavel

pavel_plachky
pavel_plachky
New Participant
April 16, 2018

Please note that the email template also contains an Outlook-only code, which is not affected by this change. In Outlook in Windows the image will scale to fit, if that is not what you want you may also consider to pad the image with white space to make it the recommended width (640px).

Terms & ConditionsAccessibility statement

Loading footer...