Fixed (Container) Background Image doesn’t work mobile

  • Stempelschneider

    (@stempelschneider)


    4 years, 6 months ago

    I am using the container block with fixed images as background. As one can see in my link its working on desktop and gives me the parallax effect. But its not working on mobile displays and devices.
    The background-attachment: fixed style is overwritten by the ::before notation of the pseudo-element css. Set to “initial”.

    Can someone reproduce this behavior?
    Its a fresh WordPress install and there are no other plugins/themes installed or active. Theme is Generatepress and the free version of Generateblocks.

    Is this a bug or made by design?

    Any help is appreciated and by the way, thanks for this great plugin.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support ying

    (@yingscarlett)

    4 years, 6 months ago

    Hi there,

    Mobile devices don’t like fixed background, it makes the image pixilated on mobile.
    That’s why in mobile mode we add CSS to make sure it’s NOT fixed.

    Hope it makes sense 🙂

    Thread Starter Stempelschneider

    (@stempelschneider)

    4 years, 6 months ago

    Does it make sense to me?

    Hm, not really. The common gutenberg cover block works fine on mobile (though I don’t like the zoom effect, thats coming with this block), so could container block too. I would like to choose and decide on my own. So, is this possible in the pro version of gutenbergblocks?

    thanks for clearing that

    Plugin Support David

    (@diggeddy)

    4 years, 6 months ago

    Hi there,

    the majority of mobile devices disable the background-image: fixed; property. The reason for this – its a very CPU/GPU expensive process that consumes a lot of energy and can cause issues on low powered devices.
    In addition to this, there is a bug on iOS devices that massively scales up the image ( which is probably the undesired Zoom effect you see with the Cover Block ).

    This is why it is best disabled on mobile devices and why we set the property to initial.

    The Pro version does provide the Advanced Background options where you can set a specific image and background properties for different device sizes, BUT it will not overcome the inherent issues i covered above.

    • This reply was modified 4 years, 6 months ago by David.
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Fixed (Container) Background Image doesn’t work mobile’ is closed to new replies.