Can I have a different background on tablet/mobile

We like the idea of having a background image on our form, but it doesn't look right on tablet and mobile. Are we able to have a background image on our form for desktop viewers but set it as a solid color for tablet and mobile viewers?

Thank you

Yes, you can do this on your current classic form layout. You only need to inject the following custom CSS codes:

@media only screen and (max-device-width: 767px)  {

.supernova {

    background-image: none !important;

    background-color: #58b6e7;

}

}

Change the background color to your preferred color. 

Guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

Oh! I forgot the response was coming to this email address rather than the webmaster account.
Thank you so much for this information. I’ll give it a shot!
...

So here’s the CSS Code we have… but the image is still showing on mobile and tablet:
.supernova {
background-image : url('https://www.jotform.com/uploads/webmaster_AHS/form_files/EO%20Form%20Background%202.5dd2e920b4eac7.74497093.jpg');
background-repeat : no-repeat;
background-position : center top;
background-attachment : fixed;
background-size : cover;
}
@media only screen and (max-device-width: 767px) {
.supernova {
background-image: none !important;
background-color: #69b3e7;
}
}
...

For iPhone and Galaxy S5, I can only see the background color not the image, which is correct based on your custom CSS.

Meanwhile for tablet, since most tablet's width is 768px, your media query was not applied since max-width was set to 767px only. Please change it to:

@media only screen and (max-device-width: 768px) {

    .supernova {

        background-image: none !important;

        background-color: #69b3e7;

    }

}

If you are still having issues, can you please clear your browser cache. Also, please tell us what browser and exact platforms are you using for testing so we may replicate the issue.

When I preview the form and select “Phone” or “Tablet” I can still see the background photo rather than the solid color.
...

Hi @webmaster_AHS!

I would like to apologize for the inconvenience, I have tested your form and was able to see that the image was still showing in the Tablet preview mode, as well as the landscape Phone mode. To fix the issue, please replace the @media CSS code with this one:

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

    .supernova {

        background-image: none !important; 

        background-color: #69b3e7; 

    } 

}

If you would like to keep the background image visible for tablets in landscape mode only you can set the parameter to max-width: 768px.

Please let us know if you have any questions!

It looks like that worked!
Thank you! ☺ One other questions.
Thank you,
Sara
...

Since your last question is of a different topic, I have moved it to a separate thread and will be answering you there shortly.

https://www.jotform.com/answers/2068141