Add a Background Image to Form?

I did it with background color, but I think it will be the same.
There two parts:
1. Is where the “Welcome introduction” on Basic Settings.
2. Is where the “Form DIV” on Styles.

On the “Welcome introduction” I added:

<span style="color:#36baf8;font-size:14px;">
Keep Me Updated
</span>
<span style="color:#000000;font-size:12px;">
Subscribe to our newsletter:
</span>
</p>

and on the “Form DIV” I added:

width:94%; max-width:240px;padding:0 0 0 5px;border:solid 2px #36baf8;border-radius:0 0 10px 10px;border-top:none;


You need to the setting for you site layout, it is try and catch of fixing the CSS and refreshing until you get the result.

Are we talking about my issue with the background image behind the contact form? What is the welcome introduction you’re mentioning?

About the “welcome introduction” when you make a new form see the tab “Basic Settings” where the “<p>Comments or questions are welcome.</p>” is found.
This is one part of the form and you can add some HTML and CSS to customize it.
The second part is at “Style Settings” option “Form DIV” in there you can CSS to customize the area where is the input text and buttons are.

You need to add the background image with css where you want it, I prefer to use background color because the background image cause problems with the layout when you using tablets or mobiles.

My question is about the contact form on my sidebar. I’m using FS Contact form.

https://192.185.169.195/~powermax/blog/

OK, now you need use CSS the position the elements.
You need to play with padding on the “Welcome introduction”
The size of the inputs are on “Style Settings” option “Input text fields”

You make small change, save and check the results, you need to play with it until you get the result

I’ve tried the padding and I’ve been able to center the form into the image but it moves completely right and out of alignment with the rest of the sidebar.

I made the changes to the input field and added CSS to the stylesheet.

#FSContact1 {
  background-image: url(https://192.185.169.195/~powermax/wp-content/uploads/2014/05/background3.jpg);
  background-position:center-top;
  background-repeat: no-repeat;
  padding: 50px;
  width: 257px;
}

I still cannot get that background image to line up in the sidebar.

You using CSS plugin?
I think you need to change the “padding: 50px” so it will have the 4 definition
I use the Fast Secure Contact Form style to change the CSS.
The main definition for the form is at “Form DIV”

You talk about the mailmen?
If so, give it ID and use CSS plugin or the theme custom CSS (if there is one) and apply the CSS, I think margin will to the work, but use all four definitions.

I apologize, but I really don’t understand what you are saying. Why are you asking about mailmen and CSS plugins?

I am using the Fast Secure CSS panel for everything but the background-image. There is no custom CSS field for background image.

the “mailmen” is the picture you entered, if you want to move it use CSS.
The background image can be set with

background-image:url('path to you image')

Oh, sorry. The background image is the entire black image with the mailman. It’s one image, not two. Sorry about that.

This is the CSS I used. If I take the CSS out, the contact form aligns with the rest of the sidebar. If I use the CSS, (as it is now) it moves out of alignment with the rest of the sidebar. It’s shifted to the right.

#FSContact1 {
  background-image: url(https://192.185.169.195/~powermax/wp-content/uploads/2014/05/background3.jpg);
  background-position:center-top;
  background-repeat: no-repeat;
  padding: 50px;
  width: 257px;
}

I think it better you separate between the image and the background it will give you more control