-
RachelWelchAsked on September 19, 2025 at 12:28 AM
Hello Team,
I have been assisted by the AI bot support which was very helpful but I am still having technical issues. I want the background image to display when my form is shown on a mobile device. Currently, the image only displays for tablet and PC.
We tried injecting CSS code in
@media only screen and (max-width: 600px) { body, .form-all { background-image: url('YOUR_BACKGROUND_IMAGE_URL') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } } Steps to apply
But still no luck
Please can you assist thanks
-
Raymond JotForm SupportReplied on September 19, 2025 at 2:32 AM
Hi Rachel,
Thanks for reaching out to Jotform Support. I believe you're referring to the Guest Registration Form. The background disappears on smaller screens as there's not enough area to show it. See the screencast below for your reference:
If you prefer your image to show on the area where your fields are, we can use a few CSS codes to do that. Let me show you how:
1. First, copy this code:
/* Adjust first product image - 31215771*/
@media only screen and (max-width: 768px){
.form-all {
background-image: url(https://www.jotform.com/uploads/leeyen/form_files/matthew-kane-205770.jpg); background-size : cover !important;
background-position : center center !important;
background-repeat : no-repeat !important;
}
}
/* Ends here */
2. Next, in Form Builder, click on the Paint Roller icon on the right and click on the Styles tab on the Form Designer menu.
3. Then, scroll down to the Inject Custom CSS box and paste the codes there.
This is how it would appear:
That's it. Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.
Give it a try and let us know if you need any help.
Your Reply
Something Went Wrong
An error occurred while generating the AI response. Please try again!