Need help! Can I set up a mktoImg Synax for inline style on landing page template?

[ksenter4]

My goal is to have a mktoImg synax in the inline style. When I do it anyother way the background image doesn't properly scale with the div.

See example code.

<div class="layers-background">

<div class="image" style="background-image:url(**MKTOIMG**);background-position: 60% !important;"></div>

</div>

Live Page:

(note: background hero image is static, not responsive to the div)

https://try.zadara.com/April2020-Veeam-BaaS.html

[SanfordWhiteman]

This will behave exactly the same way if you had it in a CSS <style>, it doesn't need to be in an inline style attribute. 

Inline style attrs are only necessary in emails, not on LPs.

But you do bring up a shortcoming of the mktoImg syntax, in that you can't have an image browser that directly populates an attribute like background-image.  To make this work, you have to create a mktoImg element that's hidden (display:none;), and then copy its value to populate the background-image of another element.

You can read about the technique here: https://blog.teknkl.com/using-a-mktoimg-element-as-a-css-background-image/

[Dave_Roberts]

This is really a really clever way to extend the native functionality for images in Marketo, and I love that you can set it to one or many elements in the document - that's a rich feature 👍

So aside from the one-to-many relationship this could create, is there any reason to do this rather than using a string variable to set the background-image property on the parent element instead of using an <img> element? I get that you can explore for your image in the dialog that pops up, but if you already know the name of your image, you can find it all the same in the Design Studio Image/Files folder and grab the URL from there all the same. Why would you want to do something like this in this first place instead of using the native functionality, can you help me understand the use-case this solves for?

[SanfordWhiteman]

It's to use the image browser instead of  having to paste a string from somewhere else.

I don't agree with the "if you know the name" argument, if Marketo removed the image browser you'd hear plenty of opposition.

[SanfordWhiteman]

Also please highlight code (in this case as XML/HTML) when you post it, it's very hard to read otherwise.