Responsive Email Background Image with Link

I've used campaign monitors guide to replace a 550px wide banner ad image within an email, so that the mobile responsive version shows a 300px wide version as a background image instead. 

My question is, how can I make this background image a link?  Right now everything works great, except when the image swaps to the small version on mobile, you can't click it anymore.


      <td bgcolor="#ffffff" class="adcell2"><div align="center"><a href="" target="_blank"><img src="images/promo-550.gif" alt="Promotion 1" width="550" height="123" border="0" class="adimage"></a></div></td>

        td[class="adcell2"] {
            background-image: url(images/promo-300-m.gif);
            width: 300px !important;
            height: 95px !important;
        img[class="adimage"] {
        display: none !important;

JD JD, 2 years ago

Thanks for your post, Mike! Swapping out an image that is also a link can be a bit more of a challenge. There is a great post regarding this on Email On Acid's blog which might help you get that link to show when the background is swapped out. I hope that helps, Mike!

Campaign Monitor Support
mikemdg, 2 years ago

Worked perfect!  Easy fix.  Thanks JD.

gromituk2k, 2 years ago

An alternative way would be to re-size the current banner within the media query;

img[class="adimage"] { width: 300px !important; height auto !important; }

The advantages are that this is much easier and only the one banner is needed. Also as the original is being shrunk down it will still look good on higher density pixel screens (iPhones Retina screens).
Of course you would have to make sure that the banner is still readable at this smaller size, which may be why you would watch to switch out for an alternative.

mikemdg, 2 years ago

Good tip!  Yes, in this case I'm doing a replace of the banners because when shrunk to 300px they become unreadable, so it's a swap for a mobile version.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free