How to adjust the background image to be mobile responsive

Please see screenshots.

As you can see i have a page background image. I currently have selected the "fixed" and "cover" options.
When i go to see the vertical mobile preview, it shows me the image covering, however when i open the form in iphone, i does not look like the cover is applying.

How do we fix this?

Here is the link to the other screenshots:

Screenshots

Hi Luis,

Thanks for reaching out to Jotform Support. I checked your form and it seems that when you view it on mobile, the background image is covered. But not all sides can be shown due to the size of the screen. Checkout this screen cast of my test:

To fix this, we can add custom CSS into your form to adjust the size. Let me show you how:

1). First, copy this code:

@media screen and (max-width: 480px){

.supernova {

background-size: 375px 745px!important

}

}

2). In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3). Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out this screenshot of my result:

Give it a try and let us know if this works for you.

hi Richie, thx for the reply, however that is not actually the result im looking for.

Please see on the first comment i included a link for more screenshots.

You will see an image titled "preferred look"

That is what i want, and in the preview it does show me that look. But when i go look at it on my smartphone, it seems to default to cover and i only get to see parts of some palm tree

Hi Luis,

Try using this CSS code below instead:

@media screen and (max-width: 480px) {

  .supernova {

    background-size: 850px 750px !important; /* Adjust width and height to make it larger and appear closer */

  }

}

Take a look at my screenshot below for the result:

Give it a try and let us know if you have any other questions.

thanks, but i dont like that it stretches the image.

By the way i just realized that on your screen cast it looks exactly how i showed on my screenshot. Is that from iphone or, simulated iphone on PC?

I want it to look like that, but if you see my other screen shot, it shows background image stretched as if it were trying to cover all.

Hi Luis,

The screenshot above was taken on an actual iPhone. The image isn't stretched on my device, and it looks consistent with the preferred look you shared earlier. Follow the same steps to inject this code into your form, and let me know if this achieves the result you're looking for.

Give it a try and let us know if you need any other help.

i think you missunderstood, i dont like your supernova background. i like the look in the first screen cast you sent which matches the preview in my screenshot

Hi Luis,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Let us know if you have any other questions.

Hi Luis,

Here's the updated custom CSS code:

@media screen and (max-width: 480px){

  body {

   position: relative;

 }

  

  .form-all {

   position: absolute;

   height: 100vh;

   width: 100vw;

   top: 0;

   overflow: scroll;

   margin-top: 0;

 }

}

/* Ends here */



Note that this recording is from my iPhone device.

Give it a try and let us know if you need any help.

looks great, thank you Kyle!