Form Designer: Submit Button background only displaying in designer mode, not online

I'm trying to add a image backgrounds to the "Submit" and "Reset" buttons of my contact form and different background images to the roll-over (mouse-over) states of both buttons.

The images display perfectly in "Designer" mode (see attached screen shot "designer.jpg"), and on the main page of the Form Builder, but in the "Preview" and the online version of my form  https://form.jotform.co/61807118013851  the buttons are grey (no background images showing)

This is the CSS I've inserted for the buttons

.form-submit-button {
    background-image : url(http://www.nightwingsgraphics.com/CPI/assets/img/BlueChrome2.jpg)!important;
    color : #ffffff!important;
    border-style : double!important;
    border-width : 3px!important;
    border-color : #000040!important;
    height : 50px!important;
    width : 100px!important;
    box-shadow : 5px 5px 5px #323232;
    font : bold 18px Times New Roman,sans-serif!important;
}

.form-submit-button:hover {
    background-image : url(http://www.nightwingsgraphics.com/CPI/assets/img/BlueChrome.jpg)!important;
    color : #ffffff!important;
    border-style : double!important;
    border-width : 3px!important;
    border-color : #000040!important;
    height : 50px!important;
    width : 100px!important;
    box-shadow : 5px 5px 5px #323232;
    font : bold 18px Times New Roman,sans-serif!important;
}

The code for the .form-submit-reset  and .form-submit-reset:hover  is the same

I also tried using just background: url(.....) and background-img:url(....) but with the same disappointing result of the image backgrounds showing ONLY in "Designer" mode and on the main page of the Form Builder. What am I doing wrong???

I confirmed and replicated the same problem you described. It works on the designer but fails to load on the actual form. The reason behind this was because of the URL you're using for your images. Both the images you use are sitting on a plain http source while your form is running on https. This causes the browser to throw warnings thus causing the images to not display.

To confirm this, try loading your form in a non https version: http://form.jotform.co/61807118013851

You will notice that by using the above link, your blue images (both static and hover) works perfect.

Now that we got the cause figured out, let's move on to the resolution, you have 2 options to choose from:

1. Either upload your images to a secured https page (this one would be the better option so you have the image hosted by yourself on your own https page) OR

2. Use these links instead, I took the liberty of uploading your images to a secured page. Feel free to use them if you don't have https:

https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37580_BlueChrome.jpg

https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37582_BlueChrome2.jpg

Just update your injected CSS Codes like so:

.form-submit-button {

    background-image : url (https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37582_BlueChrome2.jpg) !important;

...

}

.form-submit-button:hover {

    background-image : url (https://cms.jotform.com/uploads/image_upload/image_upload/Jim_R/37580_BlueChrome.jpg) !important;

...

}

Hope that helped! Don't hesitate to get back to us if you need further assistance.

PERFECT! Thank you so very much, Jim, for this easy solution. I updated the CSS code as suggested (since I don't have https), and that did the trick. Awesome!

Always a pleasure to help! :)