My text won't scroll over a background image in lightbox.

I have a box of text in a lightbox form and I would like the text to scroll over a fixed background image. I uploaded a background image and set it to a fixed page background, but when I embed the jotform and open it up, the text doesn't scroll over the background image.

In this preview (https://form.jotform.com/60108436836153) the background and text is working how I would want it to, but when it opens as a lightbox, the full text no longer scrolls over the background image

It is possible that the issue was due to script conflict because of the lightbox embed script.

Can you share to us the URL of the web page where we can check the actual embedded form. We will be able to provide a clearer suggestion and workaround if we can check on the actual website where the form was used.

Thanks.

Hi Jonathan,

URL: http://perspectives2016.squarespace.com/arrived

Password: jotform

click: "+ Expand" to view the lightbox.

Please let me know if you have any questions.

Thank you!!

Hi,

The password doesn't work though 

Will wait for your update.

Really sorry about that - please use password below

Password: Laura

Hi there,

I replicated the same issue with you, "background-image: fixed;" is not working on iFrame script. Currently, I'm trying to find a fix for that problem. I will come back with the solution for that problem.

Thank you for your patience.

Seems like that is because of the form being placed inside an iframe. The best way you can fix this now would be to directly add the CSS for the background image in the lightbox form. You have to add the following custom CSS codes to your website stylesheet:

.jt-feedback div {

   background-image: url("https://www.jotform.com/uploads/sapphireventures/form_files/corner_background.png");

   background-attachment: fixed;

   background-position: top center;

   background-size: auto;

}

This should work. http://screencast.com/t/OKHXlWXQDx 

I inserted the code above into the custom CSS but still having the same trouble. Not sure what I'm doing wrong here.

Hi,

I was also still able to see the problem on the http://perspectives2016.squarespace.com/arrived.

Please allow us more time to check and figure out a workaround. We will update you about it as soon as we can.

Can you also confirm that your websit is a Squarespace http://perspectives2016.squarespace.com/arrived?

Thanks.

thank you!!

yes, it is a squarespace site

Hi,

Thank you for confirm us that, I tried to find a way to display our form correctly with no luck, I will test more and also will ask to my colleagues in order to know if some of them have found a workaround.

Thanks.

Great, thank you! I appreciate all the help

Hi,

I have tried to fix it with no luck, but I agree with the code provided by my colleague Welvin above, just with a change, set the background of your form to transparent, I think that you can not see the change because the form has a white background, please, try setting it to transparent, add this CSS code in your website and try re-embedding the form, it should set the background to the form container instead of assign it to the form : 

.jt-feedback div {

 background-image: url("https://www.jotform.com/uploads/sapphireventures/form_files/corner_background.png");

background-attachment: fixed;

background-position: top center;

background-size: auto;

}

Do let us know the result.

Thanks.

I can't get it to work. Below is the code from Jotform with the transparent background. Is there something wrong with that?

    <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

      var JFL_60108436836153 = new JotformFeedback({

        formId: '60108436836153',

        base: 'https://form.jotform.com/',

        windowTitle: 'Title Me',

        background: '#000000',

        fontColor: '#FFFFFF',

        type: '1',

        height: 700,

        width: 700,

        openOnLoad: false

      });

    </script>

      <a class="btn lightbox-60108436836153" style="margin-top: 16px">

        Two Lies And  Truth ABout The Bubble

      </a>

Below is what my lightbox looks like:

Hi,

I checked your website and I can see the background has been applied to the form container, I removed all the Form's code and I see the background is there : 

I also, can see that the background is still white, try to set it as transparent :

Also, remove all the background properties for your form, inject this CSS code : 

.supernova{

background:transparent !important;

}

Also, add this code in your website :

iframe#60108436836153{

background:transparent !important;

}

And remove the background image that is currently in your form.

Here is also a result with the form working :

I've done everything listed above, but I can't figure out how to make the form background transparent - I believe i set it as transparent in the design tab and am not sure where else to make that change to have transparent.

Please ignore my last question - was able to remove the background image! Thank you for all your help

It worked once, but I tried to remove the background again and no luck

I was able to get the background transparent again, but how do I save that transparency? When I refresh the page the changes are gone and the background is back to white.

I checked on the http://perspectives2016.squarespace.com/arrivedand I cannot see the background image anymore.

So its the same thing with the form http://www.jotform.us/form/60108436836153

If you like you can just revert the form version to the previous version when the transparent background was still working.

You can use the Revision History tool.

user guide: http://www.jotform.com/help/294-How-to-View-Form-Revision-History

Let us know if you are not able to redo it using the revision tool and we will look for other workaround.