PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How Do I Add A Background Image for the form to lay on?

Gravity Support Forums » Plugin Support » Gravity Forms

  1. vegaskev
    Member

    I'm trying to add a background to a form. I need bits of advice first.

    1.) Where would I make the edit to place the image as a background?

    2.) is the css as follows:

    .gform_wrapper {background-image: http://mysite.com/folder/image.png;}

    Please let me know if I'm in the right direction with my css and in what file I would place this bit of code.

    I found the code in another post on the forum that had to do with changing the background color, however, I need to know where that line of code goes, as well as whether or not I have the css code written correctly.

    Thanks in advance. I appreciate it.

    Posted 13 years ago on Tuesday June 7, 2011 | Permalink

  2. Kevin Flahaut
    Administrator

    You would put the rule at the end of your theme's stylesheet - usually style.css or custom.css depending on how your theme developer set it up.

    You would want to apply the background to a specific for ID rather than the generic class where it would apply to every form. You can view the form source to grab the ID of your form. Here's an example of the proper way to do it. The example below would be for form ID #1

    [css]
body #gform_wrapper_1 {
background-image:url(http://www.mysite.com/folder/image.jpg)
}

    Here's more information on properly targeting the form elements. There are examples that would apply to all forms, and then those for specific form IDs as well.

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Posted 13 years ago on Tuesday June 7, 2011 | Permalink

  3. vegaskev
    Member

    Thanks Kev.....us Kev's gotta stick together!

    Posted 13 years ago on Thursday June 9, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    Very true. I'm pleased I could help out.

    Posted 13 years ago on Thursday June 9, 2011 | Permalink

  5. goldentwig
    Member

    Hi,
    I think I'm trying to do the opposite -- I need to REMOVE the background image (bullet points) from my form, but am stumbling over the CSS. (I think I'm close but just a little off!)

    I was told by my Wordpress theme designer to remove the background in a fashion such as this:

    #some_id_from_the_gravity_form ul li {
    background: none!important;
}

    so I have tried many variations trying to figure out which id layer #some_id_from_the_gravity_form refers to and came up with this:

    #gform_wrapper_1 ul li {
    background: none!important;
}

    It's still not getting rid of the bullet points so there must be something I'm doing wrong! Can you please help me out? Thanks!

    Oh and I would post the link to my form, but the site isn't live yet and you won't be able to view it until it launches.

    Posted 12 years ago on Wednesday March 7, 2012 | Permalink