Background images on iPads

[LukeA]

Hi,

I’m using Integral Pro 1.4.6.

I have a series of background images for the Welcome, Call to Action 1, Call to Action 2 and Testimonial sections.

These display beautifully on a PC browser with the parallax effect working really well. They also display correctly on an iPhone screen although the parallax effect is disabled (but that is expected). However, on iPad the background images for these sections are hugely magnified.

The images have all been set to 1024x683px with a resolution of 72 dpi.

In the Integral options I have the settings of No Repeat; Cover; Fixed; Center Center.

I did a Google search and apparently this is a common issue. Proposed solutions included resizing images to a max width of 1024px, (which I have done), or changing the settings – but changing to Inherit/Contain means the image does not always cover the browser window and changing the Fixed value to anything else loses the parallax effect across all platforms. The main reason for purchasing this theme was for the parallax effects.

Other solutions seem to involve changing the .css so that iPad devices are detected and treated similarly to iPhones.

Any help/guidance would be appreciated. Apart from that it’s great!

[Hans (Support Admin)]

Hello Luke,

Glad you like the theme.

As to your question regarding the background images on iPads, 1024x683px is small IMO.

The default images included with the theme are 1600px to 1900px wide minimum.

Can you try one with a larger image and see what the effect is?

[LukeA]

Hi Hans,

I have tried both 1600px and 1900px but I’m getting the same outcome.

Thanks

Luke

[Hans (Support Admin)]

Can you provide the link to your website so I can have a look?

[LukeA]

This reply has been marked as private.

[Hans (Support Admin)]

Hello @LukaA

I had a look at your site.

Looks good by the way, I like what you did.

I did not see the issue you are referring to. I reduced the size of my browser window and tested it out. I do not have a working tablet to test it on unfortunately.

I think the issue may be the cover setting. Depending on the dimensions of your image and your background settings. Try Center, Top, Width 100% for the background settings.

[LukeA]

Thanks Hans.

I’m afraid that did not work. It seems that issue is specific to iOS on mobile devices – according to some people the problem is that iOS is using the full height & width of the body instead of the viewport to decide the size. See: https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios

Unfortunately for us, most tablets seem to be iOS devices!

[Hans (Support Admin)]

Hi Luke,

Wow, seems you found a very obscure bug! Interesting.

Ok, did you try adjusting the background properties for mobile devices?

You can adjust this at the bottom of the style.css file on line 1908.

This is the CSS code to adjust,

.hero,
.testimonials,
.calltoaction,
.newsletter {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center top !important;
}

• This reply was modified 6 years, 6 months ago by Hans (Support Admin).

[LukeA]

Hi Hans,

Sorry for the delay in replying.

The CSS code looks good at that point and is exactly as above. This seems to kick in for iPhones no problem.

iPads however, seem to think they are something special!

Luke

[Hans (Support Admin)]

You can use media queries to target iPads specifically.

Look here http://stephen.io/mediaqueries/

[LukeA]

Hi Hans,

That seems to have fixed it!

Many thanks,

Luke

[Hans (Support Admin)]

Hi Luke,

Ahh glad to hear that.

I just sent you an email by the way.