Fit page background to form size

  • Profile Image
    waelmg
    Asked on November 16, 2021 at 03:03 AM

    Hi,

    I am creating a form with transparent gradient color added to it as a custom CSS. I am also adding a page background so that it appears from behind the transparency of the form and within the form size.

    Is there a way to add color gradient and background image for the form in the same time?
    If not, I will let gradient to be applied on the form and the background image to the supernova. But, how can I make the image fits exactly to the form size and changes responsively (with different screen sizes)?

    Screenshot
  • Profile Image
    batuhanatalay
    Answered on November 16, 2021 at 04:19 AM

    Hi,

    You can write custom css via Advanced Design panel.

    first of all, please click brush icon in the builder page.
    1637054187_619376ebcc16a_

    Secondly, Please click Advanced Desinger Button

    1637054235_6193771bc0ace_

    Lastly,

    Please click CSS tab from the opened page.

    1637054329_61937779524b6_

    You can write custom css in here


    If you require any further assistance feel free to let us know.

  • Profile Image
    waelmg
    Answered on November 16, 2021 at 04:25 AM

    Thanks batuhanatalay for your response.

    However that does not answer my question at all. My question is not about how to add custom CSS. I highly appreciate reading my question carefully one more time.

    Thanks again and waiting for an answer.

  • Profile Image
    Niko_N
    Answered on November 16, 2021 at 06:59 AM

    Greetings,

    Thanks for providing additional details.

    I've checked and it's not possible to have both of them at the same time.

    If you want to make the background transparent, you can follow this guide below:

    https://www.jotform.com/help/87-making-the-form-background-transparent/

    You can generate the custom CSS codes for the gradient backgrounds by following this guide:

    https://www.jotform.com/blog/color-gradients-with-css/

    Since the form structure is divided into separate parts, you can inject the CSS codes for the background image for the inner part and gradient for the outer part of vice versa, as desired.

    For instance, here's the demo form below:

    https://form.jotform.com/213192525134045

    That uses the following custom CSS codes:

    .supernova, .jotform-form {background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);}

    .supernova, .jotform-form, .form-all {
      background-color: transparent !important;
    }

    .form-all{
      background-image: url("https://www.jotform.com/blog/wp-content/uploads/2020/05/zoom-virtual-background-summertime-by-jotform.png");
      background-color: #cccccc;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }


    So, here all the form parts are set to be transparent. Then, the outer parts of the form use the linear gradient background and the inner part uses the background image.

    As for the background-size properties, you can use any of those CSS properties available:

    https://www.w3schools.com/cssref/css3_pr_background-size.asp

    Thank you!