Forward slashes breaking CSS

  • Profile Image
    hudsonwellness
    Asked on May 27, 2016 at 01:21 PM

    Hi in our form we have a custom background; I used the following code to set the image:

    .myclass {background:URL('http://myimage.com/myimage.jpg'); }

    But when I look at the preview, the above url gets confverted to just 2 forward slashes. This breaks the form an the image is not displayed. Can you assist?

    Our form: https://form.jotform.com/61435837474160
    As you can see the .form-section class has a background set, but the the missing 'http:' is breaking it. How do we stop the removal when publishing?

  • Profile Image
    Ben
    Answered on May 27, 2016 at 02:14 PM

    Could you please give us the exact code that you are adding to your form?

    The following for example should work:

    html.supernova {
        background-image: url("https://cdn.jotfor.ms//images/logo@4x.png?v3/");
    }

    Feel free to try and add that to your form and see if it works for you or not. If not then do let us know.

    In general, what you have described, should be something that works right away and does not get changed.

  • Profile Image
    hudsonwellness
    Answered on May 27, 2016 at 03:45 PM

    Here's what happens and the code difference:

    http://i.imgur.com/E8KDPQt.png

  • Profile Image
    Ben
    Answered on May 27, 2016 at 04:03 PM

    I took a look at your form and it works for me.

    This is the code that I can see:

    .form-section {
        background-image: url("//i.imgur.com/Os1HGsX.jpg");
    }

    Now, based on the image, I can see that the issue was related to the form opened over HTTPS  was calling image over HTTP.

    Security wise, that is a no-no so some browsers will just block it for you. Some other might show it due to the same being an actual image, even if it is loaded over HTTP.

    In general the current setup that you have above with // would be the best since it would load images over HTTP and over HTTPS depending on the protocol used at that moment.

    Please do let us know of course if you are still experiencing any issues.