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

  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 9 years ago on Monday February 7, 2011 | Permalink
  2. 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 9 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 9 years ago on Monday February 7, 2011 | Permalink
  4. 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 9 years ago on Monday February 7, 2011 | Permalink
  5. 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 9 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 9 years ago on Monday February 7, 2011 | Permalink

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