How to resize the background image ?

How do I get my background image to not be so zoomed in and cut off within my survey?

Hi theorderofthedead,

Thanks for reaching out to Jotform Support. You can set the background image to be fixed so that it doesn't scale, we'll use CSS for that. Let me help you do that:

1. Copy the code below.

.supernova {

    background-size : contain;

    background-attachment : fixed;

    background-repeat : no-repeat;

    background-position : center;

}

2. Then, 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 the screencast below to see my results:

You can also check out our guide about How to Inject Custom CSS Codes for more information.

Give it a try and let us know how it goes.

OK, that worked for desktop view- looks perfect there! But now for tablet and phone views, image is stuck in middle of screen surrounded by white space. Any way to get tablet and phone views to behave as desktop?
...

Hi theorderofthedead,

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

Thanks for your patience, we appreciate it.

Hi theorderofthedead,

You can add the following code to make the image responsive; we’ll add some CSS to the one I previously shared.

Copy the code below:

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

  .supernova{

    background-size: cover !important;

  }

}

@media screen and (min-width: 481px) and (max-width: 1024px) {

  .supernova{

    background-size : cover !important;

    background-position : center !important;

  }

}

Follow the same steps I previously shared on How to Inject Custom CSS Codes, add the code above, and that’s it.

Check out the screencast below to see my results:

Mobile view:

Tablet View:

Give it a try and let us know how it goes.