Setup different background images depending on what device the form is being viewed

Here is the form 60705884010349

Currently on the pc you will see this background applied  http://form.jotformeu.com/form/60705884010349

But i would like the same form to show the background below on the ipad and not the one shown as on pc

http://www.theremotedoctor.co.uk/jot-form-background/background.jpg

Please advise if possible.

Thanks

This should be possible by setting up the @media rule in your CSS code.

I've cloned your form and added my own CSS code. Here it is: https://form.jotform.com/60963575263968. You can clone it to have a copy of it in your account.

Here's the CSS code that I used:

.supernova {

    height: 100%;

    background-image: url("https://shots.jotform.com/charlie/wsm-1.jpg");

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center top;

    background-size: 100% 100%;

}

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

     .supernova {

        height: 100%;

        background-image: url("https://shots.jotform.com/charlie/background.jpg") !important;

        background-repeat: no-repeat !important;

        background-attachment: fixed !important;

        background-position: center top !important;

        background-size: 100% 100% !important;

    }

}

The background image URLs on my CSS code are hosted in my server. You need to get your own background image URL. 

1st block of code: It sets the default background image on the desktop version.

2nd block of code: It changes the background image when the form is viewed on a mobile device.

Let us know if you need more help on this. 

I forgot to mention, to clone my form, you can follow this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

Hi,

I have added the code and entered my images for the background.

The image shown on the ipad is still showing the same as on the pc.

Pc should be image of a pier where ipad should be image of clouds.

Iphone does not matter as form takes up most of the screen anyway.

I presume it's happening on iPad Pro? 

Could you try this one instead:

.supernova {

    height : 100%;

    background-image : url("https://shots.jotform.com/charlie/wsm-1.jpg");

    background-repeat : no-repeat;

    background-attachment : fixed;

    background-position : center top;

    background-size : 100% 100%;

}

@media screen and (max-width: 480px), only screen and (max-device-width: 1024px) and (orientation: portrait), only screen and (max-device-width: 1024px) and (orientation: landscape){

    .supernova {

        height : 100%;

        background-image : url("https://shots.jotform.com/charlie/background.jpg") !important;

        background-repeat : no-repeat !important;

        background-attachment : fixed !important;

        background-position : center top !important;

        background-size : 100% 100% !important;

    }

}

I have adjusted the max-device-width to 1024px and added a "only screen" on the code to be specific on mobile devices. 

Here's my cloned form: https://form.jotform.com/60963575263968. Here's what it looks like in iPad Pro:

Make sure to update the image links and remove the previous code or the ones that will conflict, to avoid problems. You can also just clone my form and edit the code there. Let us know if that one works.

Hi,

That has no affect on the ipad for me.

I have ipad 1 & ipad 3 and both show pier.

I have even looked online for ipad simulater and that also shows the pier ?

Please edit my form using the background i require.

Here is the code to use.

http://www.theremotedoctor.co.uk/jot-form-background/background.jpg

Also when i click the link for your cloned form i also see piere not cloud background.

I have cleared cache etc ??

please wait a moment

seems ok now. 

I do notice sometimes a white banner going left to right say in the lower half of the screen. 

I need to tutu iPad to portrait then back to landscape for it to go before all looks fine. 

looks ok now so maybe a slight cache glitch. 

I sometimes notice a white banner going across the page. 

I need to turn portrait then back to landscape Before it looks ok ?

Glad to know that it is working now. 

Regarding on the white banner, can you please provide a screenshot so we can further check? I don't see such issue on iPad 1 and 3 Emulators.

I have viewed my forms all morning to see what happens and i can only see this white banner appear on this form 60854960060354 and only on ipad.

Doesnt happen all the times but as you can see it does appear on the page

Screenshot supplied.

The image links for your backgrounds are using non-HTTPS protocol, if you'll use the default form URL like this one: https://form.jotformeu.com/60854960060354. They won't appear. Unless you change the protocol for your form URL to HTTP only. I guess that's one thing we need to consider. Also, is the form embedded on a website? What exact URL you are visiting?

In my case, I checked its form URL which is this one: http://form.jotformeu.com/60854960060354 (non-HTTPs). Here are the devices:

iPad Pro:

iPad 2:

iPad 3:

iPad Mini

iPad Mini 2:

I'm still unable to replicate the problem. Could you please provide us more specific details of the device you are using? What iPad device, version and browser you are using? If the problem doesn't show up on other devices and only specific on that iPad, then it might be more related to the browser or the device itself.

Hmmm

strange because my other forms are ok. 

Go here https://www.ebay.co.uk/ulk/itm/111941217940

click on item description. 

You then select office email to then be taken to the form. 

I have previewed the form from the provided link and could not replicate your issue either. I go to the address -  https://www.ebay.co.uk/ulk/itm/111941217940 and click the 'Office Email' link. See bellow 

Can you confirm for us if you still experiencing this on your side.

Hi,

Today this problem has now gone.

Glitch maybe ??

Thanks for the help.

Glad to hear the the problem is now gone. If you're still experiencing this problem on your end, let us know so that we can further investigate about the issue. Thank you.