search

MadeByMunstersLLC / MBM-Gutenberg-Zip

4 stars 1 forks source link

Container block background image overrides background color #1

Open cmgustin opened 1 year ago

cmgustin commented 1 year ago

Issue: When using the container block, if both a background image and a background color are set, only the background image shows up. Looking at the CSS, it looks like the background image is set on the background property rather than the background-image property, so it overrides the background-color property.

Steps to reproduce: Add a container block to a page, set a background color and a background image, then view the page. Only the background image will be visible and the background color property will be overridden.

Possible solution: Set the background image on the background-image property instead of the background property.

We're currently using the gutenblocks plugin on a production site and they're great, but I'm struggling with this bug. Would love an update or patch. Thanks!

kurtcunningham commented 1 year ago

@cmgustin Thanks for spotting this issue. We will take a look and see if we can get you a patch soon.

cmgustin commented 1 year ago

@kurtcunningham much appreciated, thanks for the quick response!

kurtcunningham commented 1 year ago

@cmgustin What's the desired outcome? If you have a background color and an image, the image usually displays over the color.

cmgustin commented 1 year ago

Correct, the desired outcome would be to have the image display over the background color. Currently, I'm only seeing the image and the background color isn't showing up.

claycarpenter commented 1 year ago

So you're looking to show a partially transparent image over a background color?

cmgustin commented 1 year ago

That's correct, sorry I should have clarified that. Our use case is that the user can set the background color of the block, then add a partially transparent background image that will display over the background color. The way it's currently set up, you can only have one or the other.

claycarpenter commented 1 year ago

No worries at all. We just never ran into this particular use case. The Container block does support the opposite use case, using an image as a background and then applying a transparent background overlay (via Gutenberg's gradients, which is a bit awkward but works).

We use that bg color-over-image technique regularly here, so I'll have to have a think about how to support both use cases.