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.

Adding background image to entire form

Gravity Support Forums » Plugin Support » Gravity Forms

  1. EmilioR12345
    Member

    I'd like to add a background image to an entire form. Any help accomplishing this would be greatly appreciated. Thank you :)

    Posted 13 years ago on Monday February 7, 2011 | Permalink

  2. Carl Hancock
    Administrator

    You would use CSS to do this. You would target the .gform_wrapper class and apply a background image using CSS you would write. You would add this CSS to your themes stylesheet.

    Here is an example... this would change the background color of the form to red:

    .gform_wrapper {background-color: red;}

    You would write CSS to apply a background image. The code then goes in your themes stylesheet.

    Posted 13 years ago on Monday February 7, 2011 | Permalink

  3. EmilioR12345
    Member

    Thank you for that. I kept trying to add the background image to
    .gform_wrapper {overflow:hidden; margin:10px 0; max-width:640px}, but thanks to you I got it working now.

    One more question, hoping you don't mind and can help me out with it. I need the top part of the background to be visible without the form obstructing its view. Please see example linked in the image below, basically I'd like the form to start in the blue area in the example. Thanks again.

    http://i55.tinypic.com/282q3ao.jpg

    Posted 13 years ago on Monday February 7, 2011 | Permalink

  4. Carl Hancock
    Administrator

    You would have to add some padding to the .gform_wrapper element to bump down the content. You can use padding-top in your CSS to do this. Then tell it how many pixels worth of padding you need in order to bump down the content far enough to be after the red area.

    Posted 13 years ago on Monday February 7, 2011 | Permalink

  5. Carl Hancock
    Administrator

    You would have to add some padding to the .gform_wrapper element to bump down the content. You can use padding-top in your CSS to do this. Then tell it how many pixels worth of padding you need in order to bump down the content far enough to be after the red area.

    Posted 13 years ago on Monday February 7, 2011 | Permalink

  6. EmilioR12345
    Member

    I was able to get it to work with

    .gform_wrapper form {
margin-top: 30px;
}

    though same result with padding-top.

    Thanks Carl.

    Posted 13 years ago on Monday February 7, 2011 | Permalink

This topic has been resolved and has been closed to new replies.