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.

 
   
Retina image Swap

HappysEmails

Newbie
Total Posts:  4
Posted: 01 December 2016 01:18 AM

[color=blue]Hello
I know with Retina images being somewhat a new thing to code for but if anyone has some suggestion please let me know.

The problem I’m having is getting the swapped out for mobile header/masthead image to show up at 300x 320 and not its Retina size of 600x640.
The desktop Retina sized image( 1200x 389) shows up correctly at 600x194 looking crisp.

Does anyone have some suggestion on how to make the mobile Retina image show up more than a 1/4 (top left corner) of the it?
I could really use some help on this.

I did try some of EOA code from the following links, but nothing worked:
https://www.emailonacid.com/blog/article/email-development/fluid-retina-images-for-email
https://www.emailonacid.com/blog/article/email-development/mobile-optimization-retina-images-in-email

Here is some of the code:
Header:
@media only screen and (max-width: 480px) {
a[class=“hero”] {
      background-image: url(images/Masthead_mbl.jpg) !important;
      width: 320px !important;
      height: 300px !important;
      display: block !important;
      }
}
body:
<td align=“left” valign=“bottom”>images/MastHead.jpg</td>

Please let me know.
Thanks,
HappysEmails

File Attachments
SentToEOA-Retina_Covert_g32559_Video.html  (File Size: 17KB - Downloads: 104)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 01 December 2016 09:59 PM
[ # 1 ]

Hi HappysEmails,


Could you please post your code with the images linked so I can investigate? Currently you have relative links in there grin

Many thanks!
Alex


 

HappysEmails

Newbie
Total Posts:  4
Posted: 02 December 2016 04:59 AM
[ # 2 ]

Thanks Alex,
I’ve reposted the code with linked images.
Investigate, away.
wink
Thanks,
HappysEmails


 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 04 December 2016 10:20 PM
[ # 3 ]

Hi HappysEmails

I believe I’ve fixed this issue.

You should add background-size: cover; to your Media Query that switches the image out. You should also modify the height to around 500 to account for the whole image.

Many thanks,
Alex


 

HappysEmails

Newbie
Total Posts:  4
Posted: 09 December 2016 03:31 AM
[ # 4 ]

Thank you so much! That worked!

I’m not familiar with ‘background-size:cover;’.
Is it better than ‘background-size: contain;’?

Thank you for the help.
HappysEmails.