Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 9, 2014 at 6:56 pm #234419
    jswebdev

    I have set the “Background Attachment” to “Fixed” as that’s the effect I want to have. However, when it’s set to “Fixed”, the image is not displayed on the iPhone or iPad. I set the “Background Image Position” to “top center” as you suggested in https://kriesi.at/support/topic/image-in-color-section-not-appearing-on-iphone/ but it’s still not visible, but that did not help. The only way I could get it to display was to set the “Background Attachment” to “Scoll” but then I don’t get the effect I want on the non-mobile devices.

    Do you have any suggestions to achieve what I want? Maybe some custom CSS for mobile?

    Thanks in advance for your help with this.

    March 10, 2014 at 5:54 am #234488
    Ismael

    Hey Jane!

    Can you please give us a link to the website?

    Best regards,
    Ismael

    March 10, 2014 at 12:39 pm #234636
    jswebdev

    Hi Ismael – The site is at: http://www.got2bmoving.com. There are 2 fixed color sections that are not visible on iPad/iPhone: One is below the “New York Traffic Image Credit: BBC News • http://www.nytimes.com”, “Paris Traffic Image Credit: BBC News • http://www.bbc.co.uk”, and
    “Moscow Traffic Image Credit: Voice of America • http://www.voanews.com” headers and the second is below the “Join our campaign to end traffic gridlock” image.
    Thanks!

    March 11, 2014 at 4:57 pm #235645
    Devin

    Hi!

    Can you try it with the parallax setting (basically the same thing as fixed)? I’m not getting any issues on my end but it could be a issue of forcing the device to change its rendering.

    Regards,
    Devin

    March 11, 2014 at 10:56 pm #235926
    jswebdev

    Hi Devin,
    Thanks for your suggestion. Yes, when I change the setting to “Parallax” it appears nicely on the iPhone and iPad. The downside is that I don’t see the cool effect on the laptop/desktop where the image is fixed and you see different portions of it when you scroll down the page. Just FYI, on http://www.got2bmoving.com, I have set the first color section (the one below the “NY Traffic, etc” images) to “fixed” and the 2nd color section (just above the footer) to “parallax”.
    The 2 devices that I’m trying to view this on are the iPhone 4s with OS 5.1.1 and the iPad (Model A1219 with OS 5.1.1). I don’t see the “fixed” color section on either of these. Maybe there is some custom CSS that I can add so that I can retain the “fixed” setting and also view it on these devices?
    Let me know what you think.
    Thanks!
    Jane

    March 12, 2014 at 4:19 am #236064
    Ismael

    Hi!

    Set the background attachment to fixed then try this on Quick CSS or custom.css:

    @media only screen and (max-width: 989px) { 
#av_section_3, #av_section_6 {
background-attachment: scroll !important;
}
}

    Let us know the effect on iPad.

    Regards,
    Ismael

    March 12, 2014 at 7:29 am #236148
    jswebdev

    Hi Ismael, This works perfectly on the iPhone and the iPad. Both sections are displayed and we get the neat effect of the “fixed” sections on the laptop/desktop. Thanks so much for helping me figure out the custom CSS to make this happen.
    – Jane

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Color Section not visible on mobile devices w/ "Background Attachment" = "Fixed"’ is closed to new replies.