• Skip to primary navigation
  • Skip to content

Neil Curtis

Learn how to make money online

  • Home
  • About
  • Start an Online Business
  • Latest Articles
  • My Resources
  • Contact

How to add a background image to a DIV and Gravity Forms in WordPress

By Neil on November 26, 2014

This tutorial builds on a previous detailed WordPress tutorial where I showed how to create and style a Gravity Form from scratch. In the previous tutorial we created all the fields and styled them so they fitted in with the overall style of the website theme. Also we created a DIV around the form and formatted it so that the form floated central on the page and had a border top that created a solid black line.

In this new tutorial we add some extra code to the CSS stylesheet in this DIV that adds a background. First a solid gray background is placed behind the form and then we add an image. There are two key bits of code here, one is the background CSS styling and the other is the inclusion of the “overflow: auto;” code that ensures the background stretches around everything within the DIV. A little bit of extra general formatting is done to increase the DIV width and add some padding.

Gravity Forms Logo
If you want to learn more about Gravity Forms click here to visit their official website.

LIKE WHAT YOU’VE READ?
I publish new tutorials all the time so it would be great let you know when something is ready for you to check out. I also have lots more to share with you about how to easily customize and style your WordPress website, so why not join my gang.

TELL ME MORE >>

Reader Interactions

Comments

  1. Alan R. says

    July 16, 2015 at 5:46 pm

    It looks like one has to become a real CSS expert to really make good use of Gravity forms! You appear to have a VERY intimate knowledge of CSS and the specifically that used by GF. I paid for this plug-in in hopes of having it do all this work. If I was was that good with CSS could have just built the forms with HTML/PHP/and CSS and saved the money! GAK!

    Reply
    • Neil Curtis says

      July 24, 2015 at 10:07 am

      I feel your pain here Alan. I too when I started expected all styling etc to be nice with a paid for forms plugin. Kind of one of the reasons I have made some videos so I can share what I have figured out over the years.

      Reply
  2. Mike says

    November 24, 2015 at 7:46 am

    Thanks mate, this has helped a lot for those that are learning. Just wanted to let you know you’re helping people!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2019 · NeilCurtis.me · Website powered by the Genesis Framework and uses the Maker Pro Theme

/* ----------------------------------------- */ /* Content Template: Guides Layout - start */ /* ----------------------------------------- */ #ninetypercent { width: 90%; margin: 0 auto; } #profilebox { border: dashed 2px #ccc; background: #E8E8E8; padding: 10px; padding-bottom: 15px; margin-bottom: 20px; } #profileimage { float: left; max-width: 150px; margin-right: 3%; } #profilebio { font-size: 90%; } #stepfont1 { float: left; font-size: 30px; font-weight: bold; padding: 5px; padding-left: 3%; background: #f96e5b; width: 100%; min-width: 280px; color: #FFFFFF; } #arrow { float: left; } #UWBwrap { padding-top: 10px; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc; } /* ----------------------------------------- */ /* Content Template: Guides Layout - end */ /* ----------------------------------------- */