Fit page background to form size

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)?

Hi,

You can write custom css via Advanced Design panel.

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

Secondly, Please click Advanced Desinger Button

Lastly,

Please click CSS tab from the opened page.

You can write custom css in here

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

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.

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!