3 Replies Latest reply on Apr 12, 2017 7:04 PM by Sanford Whiteman

    Workaround for overlaying text on images in landing pages?

    Jacob Brissee

      I've been testing things out and scouring the forums for 2-3 hours now and I haven't found an answer to a very basic question (though I did find my exact question - unanswered since 2014).

       

      On a standard web page we would be able to create a homepage hero very very simply with a <div> that includes a background image and nested within that div, another one with text. Simple enough.

       

      Marketo doesn't allow nested marketo elements though. So if I try to create a <div class="mktoImg"> <div class="mkoTxt">Page Title</div> </div> then I'm going to get an error about nesting mkto elements inside each other.

       

      I've tried adding a mktoString for both the text and the background image, but Marketo doesn't recognize the ${backgroundImage} when placed inside the url(). When I try to create a <div class="MktoImg" style="max-height:500px;"> and add a nested mktoString <h1>${PageTitle}</h1>, the image no longer obeys any of the CSS (max-height) and takes over the entire page.

       

      Everyone must know the workaround for this but no one seems to be sharing. What's the secret?