Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Scaling split Images in a fluid email template

kickstartinc

Newbie
Total Posts:  11
Posted: 17 November 2016 05:23 AM

Hi All,
We’ve developed a fluid format email with the hero image as a solid image which includes a logo overlapping the image. The client would now like to add live text next to the part of the logo that sits above the hero image. Does anyone have any suggestions on how to do this that would avoid slicing the logo into 2 images and still allow the email to scale. Or any suggestions that does involve slicing the logo but scales both parts of the logo proportionately. Any help would be greatly appreciated.

Thank you in advance.


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 17 November 2016 05:26 AM
[ # 1 ]

kickstartinc,
Thanks for posting!

Can you include any HTML or some pics that show what you’re trying to achieve?


 

kickstartinc

Newbie
Total Posts:  11
Posted: 17 November 2016 05:33 AM
[ # 2 ]

Thank you for the quick reply. Here is an image. Hope it helps.
So they want the text to sit to the right of the logo just above the hero image.

Image Attachments
Sample.jpg

 

kickstartinc

Newbie
Total Posts:  11
Posted: 17 November 2016 05:46 AM
[ # 3 ]

Although this maybe separate pieces we’d like to all scale proportionately while still maintaining the legibility of the text.


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 17 November 2016 06:02 AM
[ # 4 ]

Perhaps you could make the hero image a background image and then position the logo and text inside its space?


 

kickstartinc

Newbie
Total Posts:  11
Posted: 17 November 2016 06:05 AM
[ # 5 ]

Can you scale background images?


 

Geoff Phillips

Avatar
Moderator
Total Posts:  386
Posted: 17 November 2016 06:10 AM
[ # 6 ]

kickstartinc,
Yes. For Outlook it would have to be hard coded at a certain width using VML, but usually for desktop that’s not a big deal. If you put the background on a table cell, I believe it will scale automatically in most other clients as the table cell scales.


 

kickstartinc

Newbie
Total Posts:  11
Posted: 17 November 2016 06:12 AM
[ # 7 ]

I’ll give that a try and keep you posted. Thanks.


 

kickstartinc

Newbie
Total Posts:  11
Posted: 17 November 2016 07:58 AM
[ # 8 ]

Hi Geoff,
We gave it a try and although it worked in most browsers we noticed a few things.
1. In outlook 2010 and 2013 with 120dpi scaling, the image scales but the are in which appears does not. Thus the image goes beyond the visible space.
2. Android 4.4.4 doesn’t support background images so nothing appears.
3. The background image doesn’t scale in any of the apple ios 9 devices.

Are any of these issues you’ve come across? Can you offer any insights?

Thank you