Cover Block – Fixed Background Doesn’t Work

to try to duplicate your issue (site is using Frost zero theme)

• I added a cover block to one of my sites pages, selected an image from the media library, used the toggle for enabling fixed background and it seemed to work as expected in chrome browser, wp version 6.6.2.
• I added an image block to one of my sites pages, selected an image from the media library, used the transform option to change to a cover block, used the toggle for enabling fixed background and it seemed to work as expected in chrome browser, wp version 6.6.2.
• I added an image block to one of my sites pages, selected an image from the media library, used the add text over image option to change to a cover block, used the toggle for enabling fixed background and it seemed to work as expected in chrome browser, wp version 6.6.2.

Maybe I am misunderstanding the issue you are experiencing. Can you record a screencast/video and share a link to it so volunteers on this forum can get more insight?

Here’s a video showing exactly what I’m doing from start to finish, and the end result.

It works for me in the Playground without any problems – unlike in your video. I therefore suspect something in your system as the cause. Can you test it with a different browser? I had used Firefox. A lack of hardware acceleration or your graphics card may also be to blame. Try it on a completely different computer.

As I mentioned initially, I’ve tried it on three different browsers (Firefox, Chrome, Edge) on two different machines, and both had the same issue. I also updated my graphics drivers, which didn’t help either.

I suppose that doesn’t rule out the possibility that it’s still something on these computers.

However, if I go to someone else’s site that uses these effects, such as this one, the effect shows up perfectly fine. Do they accomplish this effect differently to how WordPress does it? If so, then can I get WordPress to use the same method as they do so that it works for me?

Edit: I also tried adding SeedProd to the playground site, and fixed background images work fine when done in SeedProd. So I’m thinking it’s less an issue with my machine and something substandard about the way WordPress implements this in its own cover blocks.

• This reply was modified 1 month ago by blueglow.

I have now also tested this on other devices. All successful. Also on my cell phone.

Do the computers you use have anything in common? For example, your personal profile with identical add-ons in the browsers? Or a security tool? They could also interfere with something like that.

Another idea: when you have finished the cover block, switch to the code view and copy the content displayed there. It looks like this for me:

<!-- wp:cover {"url":"https://w.wallhaven.cc/full/3k/wallhaven-3kkl16.jpg","hasParallax":true,"dimRatio":50,"align":"full","style":{"color":{}}} -->
<div class="wp-block-cover alignfull has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__image-background has-parallax" style="background-position:50% 50%;background-image:url(https://w.wallhaven.cc/full/3k/wallhaven-3kkl16.jpg)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Are there any differences on your side?

There are similarities, including AV software, etc… and I suppose I can look into AV browser security settings.

As for the differences in code, they appear to be very minor:

<div class="wp-block-cover alignfull has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__image-background has-parallax" style="background-position:50% 50%;background-image:url(https://w.wallhaven.cc/full/3k/wallhaven-3kkl16.jpg)"></div><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow"><p class="has-text-align-center has-large-font-size"></p></div></div>

Although, all that being said, there’s still the fact that a fixed background works on other sites or even on WordPress if I do it through the SeedProd plugin.

To me, that still says that the way WordPress does it by default has more compatibility issues.

The code you mentioned is not from the code editor, it looks more like the output in the frontend. I would be more interested in the code editor, as you can see the settings for this in the block editor there.

The Block Editor uses the standard CSS property background-attachment to achieve a fixed background image, unless otherwise overridden by the theme. This is described here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment – the example also works for me on this page without any problems.

There are other, older methods to achieve this. However, hardly anyone uses them today because they are too complex.

Apologies, see if this is what you’re looking for:

<!-- wp:cover {"url":"https://w.wallhaven.cc/full/3k/wallhaven-3kkl16.jpg","hasParallax":true,"dimRatio":50,"align":"full","style":{"color":{}}} --><div class="wp-block-cover alignfull has-parallax"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__image-background has-parallax" style="background-position:50% 50%;background-image:url(https://w.wallhaven.cc/full/3k/wallhaven-3kkl16.jpg)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} --><p class="has-text-align-center has-large-font-size"></p><!-- /wp:paragraph --></div></div><!-- /wp:cover -->

Ok, it’s identical to the one I have. So there must be something preventing you from interpreting background-attachment.

Very odd. I just tried it on a third machine that shares almost nothing with my usual machine, and it didn’t work there either, and it uses completely different AV and security software.

With respect to your saying that something is preventing me from interpreting background-attachment, I just checked the third-party site I linked to earlier. Looking at the source code for their page, they do use background-attachment, and on their site, it works just fine for me.