Hi Saranya,
You can do the following to create a responsive (mobile friendly landing page) with a background image and a form using the Guided Editor:
First create a main container div that will hold the whole content of the landing page. Then, create a child div that will be nested inside the main container div, which will be the row container for the background image and for the form to the right. You can give an id to this row child container such as: 'row1' and add the background image URL to it.
Now, create a mktoString variable meta tag in the head section of your HTML code, for the background image URL. You will not need to create a mktoImg variaible because you will be defining(or editing) the image URL instead of replacing the image in your landing page editor. For e.g, like how I have created:
meta class="mktoString" id="background_url" mktoName="Background Url" default="http://view.argusmedia.com/rs/584-BUW-606/images/banner-big.jpg"
In the CSS section, you will define the following code for your background image:
#row1 {
background-repeat:no-repeat;
background-image:url(${background_url});
background-size:cover;
}
This mktoString variable will create a token in your landing page editor where you can change the background image URL anytime.
Now for the form, create another child div with class="Form_container" within the 'row1' div, and float it to the right or perhaps with the Bootstrap classes( if you're using Bootstrap framework). Inside this form container div, just create another div with the marketo editable class="mktoForm". For e.g. like the code below:
div class="Form_container"
div class="mktoForm" mktoname="Form" id="form1" /div
/div
I hope the following instructions will solve your query.
.png)