Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • April 12, 2015 at 6:20 am #427109
    LukeHopkins

    Hi,

    Hoping someone can help me with this problem.

    I’ve got a background image set for a colour section with id ‘about-bg’ in the following page:

    Settings: Fixed, Top Right, No Repeat

    On the iPad and iPhone however, the image displays correctly for a second, but then it looks like another stylesheet gets loaded and the background image displays incredible big.

    Initial load: https://www.dropbox.com/s/q8gxqi1n6t0ooyq/IMG_0004.PNG?dl=0
    After page load complete: https://www.dropbox.com/s/2huppl85sagpn40/IMG_0001.PNG?dl=0

    I’ve tried adding this:

    @media screen and (max-width: 767px) {
#about-bg {
background-attachment: scroll !important;
background-size: 1600px 900px !important;
}}
}

    It does effect the positioning, but it still displays only for a second before being overridden.

    Any help would be hugely appreciated. I’ve wasted so many hours on this bug.

    Thanks.
    Luke

    • This topic was modified 9 years, 7 months ago by LukeHopkins.
    April 13, 2015 at 9:42 am #427372
    Rikard

    Hey LukeHopkins!

    I’m pretty sure it’s doing that because of your background-size argument, maybe you could try something like background-size: cover instead?

    Best regards,
    Rikard

    April 14, 2015 at 4:57 am #427982
    LukeHopkins

    Hi Rikard,

    I’ve tried this and it doesn’t seem to work. The image is displayed massively.

    Luke

    April 14, 2015 at 8:46 pm #428444
    Elliott

    Hey!

    Try setting it to “center center” instead of “top right”.

    Regards,
    Elliott

    April 15, 2015 at 2:21 am #428610
    LukeHopkins

    Hi Elliott,

    That centers the image but its still way too massive for the screen.

    Here’s a mockup of what’s happening (left), and what should happen (right).
    Pink is the iPad Frame, Yellow is the page content.

    Surely I’m not the only one who needs this. Seems like it would be a pretty common issue?

    Thanks,
    Luke

    • This reply was modified 9 years, 7 months ago by LukeHopkins.
    April 15, 2015 at 8:34 pm #429208
    Elliott

    Hey!

    It looks like it’s from some custom CSS your using.

    #about-bg {
    background-attachment: scroll !important;
    background-size: 1600px 900px !important;
}

    Best regards,
    Elliott

    April 16, 2015 at 9:05 am #429419
    LukeHopkins

    Hi Elliott,

    I have tried it without the code. This doesn’t fix the problem.

    Do you have any ideas around if this is fixable, I feel we’re not getting anywhere.

    Thanks,
    Luke

    April 17, 2015 at 6:32 am #430102
    Ismael

    Hi!

    It looks fine when I checked the page. Minimum screen resolution of iPad devices is 1024x768px so I think this should work:

    @media screen and (max-width: 1024px) {
#about-bg {
background-attachment: scroll !important;
background-size: 1600px 900px !important;
background-position: 70% 50% !important;
}}

    Please remove browser cache before testing the page. If it still doesn’t work, please give us the login credentials. We would like to check it.

    Best regards,
    Ismael

    April 17, 2015 at 6:45 am #430110
    LukeHopkins
    This reply has been marked as private.
    April 19, 2015 at 4:23 am #430799
    Ismael

    Hi!

    Thank you for the info but the login credentials are not working. Please check.

    Regards,
    Ismael

    April 19, 2015 at 11:21 pm #431002
    LukeHopkins
    This reply has been marked as private.
    April 21, 2015 at 4:37 am #431720
    Rikard

    Hi!

    I had no luck with those details either unfortunately.

    Best regards,
    Rikard

    April 21, 2015 at 7:38 am #431791
    LukeHopkins
    This reply has been marked as private.
    April 22, 2015 at 4:33 am #432530
    Rikard

    Hey!

    Great, logging in worked now. I’m not sure if the home page was the problem, but it looks like it’s responding just fine there?

    Regards,
    Rikard

    April 22, 2015 at 4:37 am #432532
    LukeHopkins

    Hi Rikard,

    Ok great. The homepage is fine, it’s the about us page and to a lesser extent, the faq’s page which have the display issue.

    Did my mockup make sense?
    Link: https://www.dropbox.com/s/9ofuk7d8462vc3n/BackgroundIssue.png?dl=0

    Regards,
    Luke

    April 23, 2015 at 5:56 am #433243
    Rikard

    Hey!

    Oh right, sorry, I think you removed the link. Please remove the background-size argument from your media query and replace the background position argument with the following:

    background-position: 70% -125% !important;

    Best regards,
    Rikard

    April 29, 2015 at 12:16 pm #436609
    LukeHopkins

    Hi Rikard,

    That didn’t fix the issue either.

    I’ve actually hired a developer (at my own cost) to find an solution for this. With the help of this developer we’ve discovered that there was some rogue code which was preventing the image displaying correctly on iOS devices:

    It was on another element that was being transformed using -webkit-transform: translate3d(0,0,0);

    After discovering this and thinking all was fixed, I found out from my client that the problem was still occurring with Android devices. What is strange, is that the site displays fine in emulation software such as browserstack, but on actual devices, it doensn’t.

    I think what’s happening is that another element is being inserted on mobile only and then styles are being applied to it. I’m guessing Javascript because it comes at the end of the page load so even what we see in Browsershots on the images that do have a background image may not be correct. There may be another background that is used later.

    The CSS rule in question is .avia_mobile #top .av-parallax-section (I don’t know why its called that because its not strictly parallax)

    I hope you can help me resolve this issue as I’m positive I can’t be the only one experiencing this problem.

    I look forward to hearing from you.

    Kind regards,
    Luke

    May 4, 2015 at 5:55 am #438724
    LukeHopkins

    Hi,

    I’m just wondering if you had an update on this issue?

    Thank you
    Luke

    May 5, 2015 at 4:52 am #439498
    Rikard

    Hey!

    As far as I know you are the only one having this problem, did your developer not find a solution for it? I not sure I can give you any other solutions than the ones which have already been posted. I think your best course of action would be to remove all custom code and start from scratch to see which of the solutions above actually works.

    Regards,
    Rikard

    May 6, 2015 at 2:34 am #440071
    LukeHopkins

    Hi Rikard,

    I’ve tried removing all the custom css and implementing the above snippets one by one but nothing is working.

    As mentioned in the original post, it appears that it loads correctly for a second, but then another stylesheet loads and overwrites the change.

    Are you able to get one of your developers to looking into this. I’ve spend around 6 hours on it, my developer has spent about 5 hours on it (at my cost) and we’re unable to find a solution. This website project has lost any profitability it had for me now and I really just need your help to find a solution so this works.

    I look forward to your reply.

    Luke

    May 7, 2015 at 5:38 am #440748
    Rikard

    Hi!

    I had a look at the /about page just now and it looks very responsive to me on every screen width?

    Best regards,
    Rikard

    May 7, 2015 at 5:55 am #440755
    killyman

    I think I’m having a similar issue as Luke. I’ve posted my issue here.

    https://kriesi.at/support/topic/color-section-parallax-background-image-ipad-and-iphone-6-problems/

    Could it be a problem with theme versions as I mention in my support topic post?

    May 7, 2015 at 5:55 am #440756
    LukeHopkins

    Hi Rikard,

    Yes the page is responsive, but the background image is not. As previously mentioned, the background image is fitting to content, not to the browser size.

    Explanation: https://www.dropbox.com/s/9ofuk7d8462vc3n/BackgroundIssue.png?dl=0

    Please also note, that it appears to work fine in emulators such as chrome dev tools, and browser shots, but on ACTUAL devices, it doesn’t work.

    Luke

    May 8, 2015 at 6:07 am #441381
    Josue

    Hey Luke!

    Please update the theme to the latest version (3.1.5).

    Best regards,
    Josue

    May 18, 2015 at 4:44 pm #445814
    killyman

    Hi Luke,

    I’m having no luck getting any response from the support forum moderators regarding my issue. See link below
    https://kriesi.at/support/topic/color-section-parallax-background-image-ipad-and-iphone-6-problems/

    Just wondering if your issue was resolved with the theme update to 3.1.5. Seems like my problem is because of the theme update. The issue I’m having doesn’t present itself with an older theme version I have on another test server.

    Killyman

  • Author
    Posts
Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Background Image on iPad displaying huge’ is closed to new replies.