How To Add Image on Form and Position It On the Right?

I am a bit frustrated again I figured now how to get the space above off the form but now on the web page I want to insert an image to the right. I can't figure out how to control the width of the form. When I put in pixel dimensions it centers the for with all this space on the left and right and I want it to only be a certain with with room to put an image to the right. I could do a work around with an iframe to display the form but I don't want to do that. I can't figure out what to put in the CSS to do this?

Here is the example again http://www.losmedanos.edu/alumstory/

Hi,

I assume that the image you would like to insert to the right is the one named "Covers in the Past"?

You could however use a background image attribute in the CSS. I cloned your form and added my custom CSS code in the Form Designer.

Here's my custom CSS code:

.form-all {

    background-image: url(http://www.losmedanos.edu/openhouse/covers.png);

    background-repeat: no-repeat; 

    background-position: right top; padding-top:68px;

    z-index: 999;

}

Here's my demo cloned form for this: http://www.jotform.com/form/50198689434973 

Another method is we can use to insert an image using the image field in the form builder and position it to the right. But, let me know if the above one works for you.

Thank you.

Hey Charlie thanks for this and it's close to what I wanted and since I asked the question I reverted to using a table to try and achieve this look. I am going to want the image clickable though because there will be either ads or buttons in that right column so a background image will work just for an image but not if I want that image to be interactive. So I just needed to be able to control the width of the form and not have all the extra space appear on the left an the right. 

I don't seem to be choosing the correct thing to modify because I don't see where I can control the outer shell of the form to contain it. If I decrease the width of the form it just centers it and then adds extra space on the left and the right. What thing am I overlooking?

Have you considered using the image field and position the image with CSS?

Then preview your form and get the ID,  by doing a right click on the image and clicking on "Inspect Element", to style that specific element: 

You can inject the custom CSS code like this to make it appear on the right:

#cid_13{

position: absolute;

margin-top: -920px;

margin-left: 510px;

}

See the form here, you will see the image is clickable: 

http://form.jotformpro.com/form/50205277425955?

On regards of the space on the left and right, are you referring to this space?:

No I didn't consider using the image field and that looks like a great option.

Yes the space on the left is what's bothering me the most. I want to be able to align it flush left and I am not sure how to do that?

Please try injecting this  CSS code after decreasing a bit the width of the form if you want to:

.form-section {

margin-left: -30px;

}

Here is how all the elements of the form will be aligned to the left:

Let us know if this helps you, we will be glad to assist you.

Ah ha!! That did it! Thanks, I didn't know what class names controlled what.

Thanks, Eloine

On behalf of my colleagues, you're welcome.

If you need further assistance, please let us know.
Best Regards.