How Do I Use Two Background Images in My Form and Have at Least 50px of Margin between Them?

I have this form set up, but I'd like to anchor one image to the bottom left, and another to the bottom right. This way it will stretch correctly no matter the monitor size. It would also be cool if we could make the two images always have at least 50px of black background between them so they don't get stuck under the form. Uploaded a screenshot of the desired end result, and here are the two images seperate:

https://www.dropbox.com/sh/0wib2m7stseawq2/AABeTFoL9uE90yN_tHNSbIBDa?dl=0

After investigation and looking into code of your form I saw that you applied one image for background. In case that you want to have background which contains two separated images one for left side and one for right side you need to write additional CSS code that will be applied on element class .supernova.

http://stackoverflow.com/questions/11468604/multiple-backgrounds-with-background-size 

Considering that there will be a lot of coding to do in order that your background looks good on all devices maybe it is better to try to embed your form on website without background and all form code put in one element and additional two elements will have some id on which you will apply left background and right background. 

https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/ 

Hope this will help. In case that you need additional assistance, be free to contact us. 

Maybe Ben can help? I know he said it was possible while answering one of my previous questions!

http://www.jotform.com/answers/535181-How-do-I-anchor-the-background-image-to-the-bottom#5

Please try the following:

1. Go into the form designer:

2. On the Background Image menu of the Design tab, remove the URL, so that the box contains the default placeholder text: "Paste image link or upload from right"

4. Click the CSS tab and replace all of the code in its work area with this

5. Save the form:

Now, as to having at least 50px of black background between them, I'll leave that to Ben because I don't know if that's even possible but he may well have a way to do it. I'll notify him about this thread and he'll post a reply here in due course.

Cheers

Hi Liz, as my colleague Wayne (abajan) mentioned, he sent me the email and from the looks of it he already has provided you with the right code :)

Now since you want to have a gap in the images, which makes things interesting and allows us to show you another option in CSS that is not very known nor often used - calculation function I would be happy to show you how it would look.

First I would like to say that I made a clone of your jotform so that I can remove the code that could cause any side-effect or would look bad. Following that, I added code from my colleague with a minor adjustment, so:

html, body is now html.supernova.

The code was good, but would make the image appear on both HTML and body elements and I believe that my colleague was after html > body instead which gives it a bigger importance over other code.

This is the modified code that you should inject at the bottom of the form:

html.supernova {
    background-image : url('//www.jotform.com/uploads/abajan/form_files/left-background-for-50926558868978.jpg'), url('//www.jotform.com/uploads/abajan/form_files/right-background-for-50926558868978.jpg');
    background-attachment : local;
    background-position : left bottom, right bottom;
    background-size : 50% auto;
    background-repeat : no-repeat;
    background-size: calc(50% - 50px);
}
@media screen and (max-width: 200px) {
 html.supernova {
    background-size: 50%;
 }
}
.form-input-wide div {
    float : left;
}
#cid_45 img.form-image {
    width : 210px;
    height : auto;
}
#cid_43 img.form-image {
    padding : 15px 15px 15px 26px;
}

The changes that I made are in bold, so that they can be easily seen and let me go over the options and what they do:

background-size: calc(50% - 50px);

We have set it after the background-size : 50% auto; because we want the images to be properly shown if the browser used is older and does not know or can use calc() function, but if they do, to use it instead.

If you want to increase the 50px of width between the two images, make sure that there is always space after a minus field and that it does not become -50px since that can not exist (width of -50px does exist).

Now the next rule that is set to be activated once the browser is smaller than the size of any mobile device is to stop the calc function from going into error on some browser because if 50px that we have added is more than available on form, the error might be shown, so I would only recommend to use it with smaller widths - up to 100px, or to add proper handling of it as above.

You can simply clone the jotform to your account from this URL: http://form.jotformpro.com/form/50936951649973

Do let us know how it looks :)

Killed it. This is exactly what we needed it to do! Thanks so much for the explanation as well, so we can modify as needed for forms in the future. You guys all rock! Thank you.

Great!! We are glad that the solution provided by our colleague helped you. Do get back to us if you need any further assistance. We will be more than happy to assist you.

Thank you for using JotForm!!