Adding a background image to an HTML box

CM1
1

I’m looking to add a background image to an html widget. Adding it in the css is not an option. Is it possible to amend my html code to include the background image? The image file is below, as is my html. How & where would I put in the background image.

/Assets/uploads/images/Form Background.jpg


    
    
   ## Request More Information
   
    
   
   
   
    
    

<form method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" style="display:block; width:210px;" id="contact-form"> <br>
<input type="hidden" value="00DA0000000Kga2" name="oid"> <br>
<input type="hidden" value="http://bostontechnologies.com/contact/thank-you" name="retURL"> <br>
<input type="hidden" value="BT Website- Liqudity" name="lead_source"> <br>
<input type="text" style="width: 200px;" size="20" name="first_name" maxlength="40" id="first_name" placeholder="First Name" class="mail placeholder valid example"> <br> <p></p> <br>
<input type="text" style="width: 200px;" size="20" name="last_name" maxlength="80" id="last_name" placeholder="Last Name" class="mail placeholder example"> <br> <p></p> <br>
<input type="text" style="width: 200px;" size="20" name="company" maxlength="40" id="company" placeholder="Company" class="mail placeholder example"> <br> <p></p> <br>
<input type="text" style="width: 200px;" size="20" name="email" maxlength="80" id="email" placeholder="Email" class="mail placeholder email required example"> <br> <p></p> <br>
<input type="text" style="width: 200px;" size="20" name="phone" maxlength="40" id="phone" placeholder="Phone" class="mail placeholder required example"> <br>
<input type="hidden" name="00NA0000002eDcG" id="00NA0000002eDcG"> <br>
<input type="hidden" name="00NA0000002eDcL" id="00NA0000002eDcL"> <br>
<input type="hidden" name="00NA0000002eDcQ" id="00NA0000002eDcQ"> <br>
<input type="hidden" name="country" id="country"> <br> <br><p> </p> <br>
<input type="submit" value="Request More Info" name="Request More Info" class="submit"> <br> </form>
2

Joe,
Background images are controlled via CSS. You can avoid setting them in the CSS file by adding a style attribute directly to an element of your choosing, adding the background property inline, but it’s a CSS property that controls that behaviour.

An example would be


  
My Block of anything

It should be noted, though, that CM1 does not manage links in HTML content because it is a free-form code block. This means that if you move the image to a different folder in CM1, you will need to manually update the path in any HTML assets/widgets using it.

Which element you attach it to depends on where you want it to live (ie: what you want it to be the background of). A whole list of properties can be found here: https://developer.mozilla.org/en/CSS/…

3

Daved, I tried to apply a CSS root class to the object, but the html box was locked on the style tab. I don’t know how to get around that lock or proceed from here

4

Joe,
You cannot apply a Root Class to an HTML widget. Because it is a free-form input for raw HTML, you have full control over any markup produced by it, which keeps it from having an option to set a root class on it. The equivalent of this for the HTML content would be to wrap the entire contents of the HTML widget in a div with the class on it.


  
[current HTML goes in here]

or


  
[current HTML goes in here]