Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #234419

    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 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.


    Hey Jane!

    Can you please give us a link to the website?

    Best regards,


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



    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.



    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, 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.



    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.



    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

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.