Email Template "Get Ready": Header is displayed incorrectly on mobile phone

[Christina_Euric]

Hi everybody!

We want to use the email template "Get Ready" for our newsletter.

The header in the template recommends the image size 660x228px.

I inserted the header with the right size and it is shown in Marketo and on the Desktop version in Outlook and Google Mail correctly.

But on the mobile phone (Gmail) it is displayed incorrectly.

I attach screenshots of the header.

Do you know why the header is displayed like that?

And what I could to do to change it?

Best wishes

Christina

[Grace_Brebner3]

Hey Christina,

We'd need to see the code to really be able to provide the fix but likely this an interaction of image size + background size/repeat instructions in the code. Likely the responsive arrangement makes the container larger than the original 228px high size of the image, and the code has been set to not allow the image to be stretched larger than its native size to fill the space.

You probably want to make sure the background styling is set to background-size: cover and background-repeat: no-repeat, but you may also want to consider tweaking either the size of the uploaded image (so that the mobile version doesn't look pixelated), and/or tweak the text styling so that the mobile container isn't so tall.

Hope that helps

[Christina_Euric]

Hi Grace,

I checked the code and it has already the right settings:

<td class="module" style="word-break: break-word;-moz-hyphens: none;hyphens: none;border-collapse: collapse;-webkit-hyphens: none;background-image:${heroBackgroundImage};background-repeat: no-repeat;padding-left: 0;background-size: cover;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;background-position: center center;" valign="top" bgcolor="${heroBackgroundColor}" background="${heroBackgroundImage}">

The recommended image size for the header from the Template is 660x228 px.

I already enlarged the size to 1.013x350 px but there still is a small bar visible from a repetition of the image on the mobile phone.

Do you have any idea what the right image size is?

Or how I can change the code to display the image correctly?

[Gerard_Donnell4]

Without the code it is very hard to help you debug. Have you changed the size of the Font for mobile? You might need to make you font sizes smaller in the media query. Make it a lot smaller and see if it still occurs. It looks to me like your Font is so big or that there is so much text that it is spilling out of the div (stretching it) and therefore repeating the image.

[Dave_Roberts]

Hey Christina-

In the code you shared here, you've got the background image applied to both the background:______ and background-image:_______ properties.

background can be thought of as "all the background rules": -image, -size, -repeat, -color ...

background-image is kind of a specific subset of the background attribute/property.

The way this code reads to me is that it loads the -image, then the -repeat, then the -size and then the background: rule (which should contain the same rules as the subsets. Here's a link to a little more info on the background property: CSS background property

Here's the example they provide: background: lightblue url("img_tree.gif") no-repeat fixed center;

Notice how all the properties are kinda rolled up into one piece? When you're just loading the image part, but using the background property it can create a conflict b/c some systems will interpret that as "zeroing out" all the add'l properties that are not included (like -repeat, -position, -size ...).

For a quick fix, I'd try rearranging the code so that the background: property came before the others rather than after.

<td class="module" style="background:${heroBackgroundImage}; word-break: break-word;-moz-hyphens: none;hyphens: none;border-collapse: collapse;-webkit-hyphens: none;background-image:${heroBackgroundImage};background-repeat: no-repeat;padding-left: 0;background-size: cover;background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;background-position: center center;" valign="top" bgcolor="${heroBackgroundColor}" background="${heroBackgroundImage}">

[Christina_Euric]

Hey Dave,

thank you very much for your tip.

Unfortunately, the image is still displayed incorrectly when I changed the code in the rearranged way.

Right now, we think that it might be a problem in Gmail and not in our template.

We changed the image size to 1.071x370 px and then it is still not displayed completely, but at least it is not repeated anymore.

And also thank you to Gerard for your answer!

[Dave_Roberts]

Found this this morning, looks just like what you're running into here:

Background Images Breaking in Gmail > Litmus

This suggests that Gmail will ignore the background-* (image/size/repeat) properties in favor of the "background:" property. Maybe you could also try adding the no-repeat, size etc into the background property instead of just the image's URL, something more like this:

background: ${heroBackgroundImage} no-repeat center / cover;

Here's a look at the syntax, copied from CSS background property :

CSS Syntax

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.