How can I make a paralax style background for my form?

  • Profile Image
    creativeprofessionals
    Asked on July 10, 2015 at 02:46 AM

    Hi guys. 

    I've created the following form: 

    https://secure.jotform.co/form/51898503084866

    At the Jotforms URL, it looks great, with a static background image as the form scrolls down.

    However when I embed the code on our website, it has to stretch the image: 

    http://www.dsi.tv/uxdesignerapplication.html

    I inserted the following custom CSS into Jot forms according to your forum, but it still doesn't look like the form on the above Jotforms URL. 

    Can you help me?

     

    body, html {

    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) repeat fixed;

    color: #FFF;

    margin: 0;

    padding: 0;

    -webkit-background-size: cover; /*for webKit*/

    -moz-background-size: cover; /*Mozilla*/

    -o-background-size: cover; /*opera*/

    background-size: cover; /*generic*/

    }

     

  • Profile Image
    BJoanna
    Answered on July 10, 2015 at 10:55 AM

    After inspecting your form and website behavior you are getting is normal because in first case you have just form which has background and when form is embedded to the website, background of site has priority and it will expand background of form. What can be workaround of problem and how you can achieve similar behavior is to remove background of the form inside of Form Designer and then to put background to your website directly inside of your source of site. 

    Also after inspection I see that you are using script for embedding your form on the website. We are recommending using the iframe code. With iframe code and CSS that you need to apply on the website, source of your web page need to look like this:

    <html>

    <head>

    </head>

    <body>

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/51903752708963" frameborder="0" style="width:100%; height:3114px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    <style>

    body, html {

    background: url(http://www.jotform.com/uploads/creativeprofessionals/form_files/fullpagef1image1.jpg) repeat fixed!important;

    color: #FFF!important;

    margin: 0!important;

    padding: 0!important;

    -webkit-background-size: cover!important; /*for webKit*/

    -moz-background-size: cover!important; /*Mozilla*/

    -o-background-size: cover!important; /*opera*/

    background-size: cover!important; /*generic*/

    }

    </style>

    </body>

    </html>

    After using this form and this custom CSS website will look like this:

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    BJoanna
    Answered on July 10, 2015 at 11:06 AM

    I forgot to mentioned, you also need to set background of your form to be transparent.

  • Profile Image
    LorealStRemy
    Answered on February 29, 2016 at 09:24 PM

    Removed.