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.

Gravity Forms, sidebar widget: Applying a background image

Gravity Support Forums » Plugin Support » Gravity Forms

  1. DNWEIL
    Member

    Hey Everyone, I need to apply a background image to the sidebar widget - so that the form floats over this image. How do I do that?

    Any help appreciated! Thank you!

    Posted 11 years ago on Monday March 25, 2013 | Permalink

  2. Chris Hajer
    Key Master

    Please begin by sharing a link to the page on your site where we can see this form, and let us know what image you want to use for the background. A screenshot or mockup of what you want it to look like will be helpful as well.

    Posted 11 years ago on Monday March 25, 2013 | Permalink

  3. DNWEIL
    Member

    Chris, The site is currently not live. However, you may find screen captures of the sidebar forms here:

    Current, existing form in development: http://dnwassociates.com/wp-content/uploads/2013/03/mockup-storytelling-sidebar-current.jpg

    Desired background for the form: http://dnwassociates.com/wp-content/uploads/2013/03/mockup-storytelling-animal8b.jpg

    Posted 11 years ago on Tuesday March 26, 2013 | Permalink

  4. Chris Hajer
    Key Master

    We won't be able to give you any useful code without being able to see the form online and the actual background for your form widget.

    In general, to apply a background image to a div, you would add CSS like this to target your widget form specifically:

    [css]
body .widget #gform_wrapper_134 {
    background: url('http://dnwassociates.com/wp-content/uploads/2013/03/mockup-storytelling-animal8b.jpg') no-repeat;
}

    The #gform_wrapper_134 would be changed to the ID of your widget form.

    Posted 11 years ago on Tuesday March 26, 2013 | Permalink

  5. Chris Hajer
    Key Master

    Here's a super-ugly screenshot showing your image as the background for one of my form widgets: http://minus.com/lRlSWrOotNUpK You obviously need to create your image and form at the same time to get things to line up properly. Your image was not designed to be used behind my form. Just an example of the CSS to put the image as the background for the form widget.

    Posted 11 years ago on Tuesday March 26, 2013 | Permalink