Syntax to modify the background image to create a Guided Landing Page Template

[Jiwon]

Is there any special syntax for creating a Guided Landing Page Template that can make me edit a background image?

I wish I could easily insert/edit the background image on the edit draft of the landing page.

Please let me know.

[SanfordWhiteman · Accepted solution]

See

Using a mktoImg LP element as a CSS background-image

[Dave_Roberts · Accepted solution]

You could use a "mktoString" variable to set the URL for the background image. I normally set this up using the "background" property in CSS so that you can also include things like color and linear-gradients (or even multiple images, or combos of all the above).

First you'll want to setup the string variable, here's a look at what I use for a section with id="HERO".

<meta class="mktoString" mktoName="[▉ [HERO] Background" id="HERO-Background" default="url(http://www.fpoimg.com/1440x360)" allowHtml="true">

Next, you'll want to setup some CSS for the background property that ties into the background property:

#HERO {
	color: ${HERO-Color};
	background:${HERO-Background}; /* enter: #000, rgba(0,0,0,1), url(http://...) */
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

As a result, you should see something like this in the LP Editor:

When setup this way, you can use a background image by adding the "url(....)" syntax around the URL for your image, a hex code for a basic color (as shown in the [HEAD] Background variable) or a linear-gradient w/ the syntax for that, something like: "linear-gradient(to top, #000, #fff)"