Fix: $black background-color remains visible when there is no backg…

[ferdiesletering]

…round dim with transparent images.

Description

When setting the background opacity to 0 with a PNG transparent image the background remains black.

Screenshots

Current

Fix

Types of changes

Bug fix

Checklist:

• My code follows the WordPress code style. <!-- Check code: npm run lint, Guidelines:

[jasmussen]

This is an excellent PR, thank you! But instead of setting the color to transparent (this increases CSS selector specificity) — I feel like it's important to ask the question: why was the background black in the first place?

I will take a guess: because for the longest time it only supported images, and given the text was white by default, it felt natural to pair that with a black background.

However given we now support both color-only backgrounds, gradient-only backgrounds, and either of those as overlays, there doesn't seem to be a use case for it in the first place.

And if we remove the black, you can get yourself into trouble if you really want to — if you kept typing here the white text would overlay a white background (this cover shows a blue square with transparency outside of it):

However you could get yourself in trouble regardless, and there's no way we could ever protect you from that. The theme could be a dark theme, or the text could be set to an in-opportune color.

I say: remove line 4 in cover/styles.scss entirely!

However I would like a sanity check from @jorgefilipecosta first, as I know he's worked with some of this.

[jorgefilipecosta]

Hi @jasmussen, @ferdiesletering, I think we set the background color to black because by default there is some opacity.

I think the fix is to move background-color: black to be applied only when there is no opacity e.g: move the line four of style.scss to:

&.has-background-dim {
	background-color: $black;
} 

[ferdiesletering]

@jasmussen @jorgefilipecosta thank you for constructive feedback 🙏
Could you recheck the PR?

[jasmussen]

Nice work!

This is with the most recent code:

Note that dimming works. The shift from 10% to zero may not be the most intuitive, but most should not see this, and it supports the use case where you want the transparency from the PNG image, as you noted.

I also confirmed that dimming would have been broken if we had simply removed the background color entirely:

[jorgefilipecosta]

The changes look good 👍 Thank you for working on this @ferdiesletering!