A second question...since this is now a variable, can I add any media queries to reposition the background on mobile?
See below:
Also, it looks like on desktop the <td width"300" parameter is being ignored.
See below:
Hi Andrew,
Please update the both codes.
In Body section:-
<td class="iphn-width" height="150" width="300" background="${BannerSectionBG}" bgcolor="#FFF" style="background-image:url('${BannerSectionBG}');background-repeat:no-repeat;">
In Head tag:-
<style>
@media only screen and (max-width: 479px) {
.iphn-width{background-position:center !important;}
}
</style>
This works for both the queries.
Regards,
Akshay
Hi @Akshay_Pant you have been a great help with this topic. i also have a similar question. For some reason the Hero Img is not showing up in the Content portion. Here is the code I have.
In the <head>
<meta mktoModuleScope="true" class="mktoString" id="BannerSectionBG" mktoname="Hero Img" default="http://esri.ca/content/dam/distributor-restricted/esri-ca/images/home/2560x1152-03-forrester-names-e..." />
style:
@media only screen and (max-width: 680px) {
.iphn-width{background-position:center !important;}
}
body:
<!-- HERO : BEGIN -->
<tr>
<td class="iphn-width" height="150" width="300" background="${BannerSectionBG}" bgcolor="#222222" align="center" valign="top" style="background-image:url('${BannerSectionBG}'); text-align: center; background-position: center center !important; background-size: cover !important; background-repeat:no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height:380px; background-position: center center !important;">
<v:fill type="tile" src="http://esri.ca/content/dam/distributor-restricted/esri-ca/images/home/2560x1152-03-forrester-names-e..." color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Do you know what I could be missing? Also in Outlook the image looks in entirely even though I have a fail safe for Microsoft devices.
The email is showing no modules: