mktoImage for a background image?

Highlighted
Anonymous
Not applicable

Re: mktoImage for a background image?

A second question...since this is now a variable, can I add any media queries to reposition the background on mobile?

See below:Screen Shot 2017-09-13 at 3.11.41 PM.png

Also, it looks like on desktop the <td width"300" parameter is being ignored.

See below:

Screen Shot 2017-09-13 at 3.11.34 PM.png

Highlighted
Level 5

Re: mktoImage for a background image?

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

Highlighted

Re: mktoImage for a background image?

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: 

 

Ayan_Talukder_0-1596143244182.png