Cover block: Can not set repeated background image with gradient overlay

[webmandesign]

Description

It seems to be impossible to set Cover block with repeated transparent PNG image on background positioned 50% 0 and overlaid with a gradient.

Step-by-step reproduction instructions

1. Create a Cover block in a page and set it with these:

• Media settings:
  • repeated background,
  • set this background image,
  • background position: Left = 50%, Right = 0.
• Overlay:
  • Opacity = 100,
  • Linear gradient from #d1e4dd to #d1e3dce0 (rgba(209, 227, 220, 0.88)), angle 0°.

2. Compare the result with expectations seen in the screenshot below:

• The image can not be seen as the circles in PNG background image are semi transparent black and the Cover block background color is black as set by Cover block default styles.
• The position of the image is set to 50% in Cover block default styles and custom position from block settings is not honored.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.9.1
• Twenty Twenty-One 1.5
• Background image used: download the image

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[matiasbenedetto]

I'm not able to reproduce this using the latest trunk version of Gutenberg. Seems to be fixed with the latest Cover Block changes regarding fixed and repeated backgrounds.

[webmandesign]

The issue still persist for me. Using WP 6.0.1 and Twenty Twenty-One 1.6.

[jordesign]

I'm no longer able to recreate this in WP6.3