Prevent background image from scrolling

  • Pace_Martyn
    Asked on July 10, 2021 at 1:33 AM

    When I'm on the editing part of the site, my background image stays still and it's the questions tat scroll up and down.


    But when I go to test the form and fill it in, the image scrolls with the questions.


    Is there a way to keep the background image still (like in the editing format) at all times?


    Thanks.

  • Billy JotForm Support
    Replied on July 10, 2021 at 9:02 AM

    Hi there!

    I hope you're doing well and thanks for reaching out.

    Yes, there is a way to prevent the background image from scrolling by injecting a CSS code.

    Please follow this guide on how to inject CSS code and inject the code found below:

    .supernova {
    background-attachment: fixed !important;
    }


    Let us know if you need further assistance.

  • Pace_Martyn
    Replied on July 10, 2021 at 9:04 AM

    I've already got this existing CSS code.

    .form-all:before { /*

    These adjust the position of the logo */

    width: 100% !important;

    right: unset;

    background-position: center; /* now centered with form */

    }

    button.form-submit-button-black_blue:hover {

    color: white !important; /* This is the

    color of the text when hovering over the buttons */

    }

    #id_2 #input_2 { /* style copied from other buttons

    */

    text-shadow: -1px -1px 0px #000000;

    border: 1px solid #000000!important;

    -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.44);

    -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.44);

    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.44);

    background: #030303;

    background: -moz-linear-gradient(top, #2e2e2e 0%, #030303 100%);

    background: -webkit-gradient(linear, left top, left bottom,

    color-stop(0%,#2e2e2e), color-stop(100%,#030303));

    background: linear-gradient(top, #2e2e2e 0%, #030303 100%);

    }

    .form-label.form-label-auto {

    display: block;

    float: none;

    text-align: left;

    width: 100%;

    }


    Which part should I replace, delete, change? As I don't want to lose any of my existing settings.

    Thank you.

  • Patrick_R
    Replied on July 10, 2021 at 1:11 PM

    Hi! Don't remove anything. You need to place the code provided by my colleague at the end of your existing CSS code.

    Thank you!