This topic contains 11 replies, has 2 voices, and was last updated by  Hans (Support Admin) 3 months, 1 week ago.

Background images on iPads

  • 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!

    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?

    Hi Hans,

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

    Thanks

    Luke

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

    This reply has been marked as private.

    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.

    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!

    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;
    }

    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

    You can use media queries to target iPads specifically.

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

    Hi Hans,

    That seems to have fixed it!

    Many thanks,

    Luke

    Hi Luke,

    Ahh glad to hear that.

    I just sent you an email by the way.

You must be logged in to reply to this topic.