Adding Images as Block background just as Color

[henriqueiamarino]

What problem does this address?

Today we can edit Block colors on Text, Background, and Link. For each of these options, we can select Solid values or Gradient color. Following the same concept why can’t we use Images on the background just as we do with colors?

What is your proposed solution?

I see a low-hanging fruit feature here that is already present in design tools such as Figma (image below). In Figma, there are even more options (like Texture and Video) but I strongly believe that adding at least Images as Backgrounds would enable our designs on the Editor to be much more creative.

[SweetSue]

Here is a screenshot of Blocksy free theme, for Single Posts customization :

[richtabor]

Related: #16479

[richtabor]

Also related, though quite old: #16660 & #21439

[richtabor]

Found some Figma explorations: https://www.figma.com/file/GLOCs57C8sSVam03fMnln6/Color-panel?node-id=229%3A16292&t=73P8mVH3vf4QcQIg-1

[jameskoster]

There's some good looking stuff there @richtabor. I'd be curious to see an approach that makes use of ItemGroup (or similar), to place the controls in a popover, similar to how the color panel works. This would do two things that I think might be beneficial:

1. Condense the Inspector – there's a lot of controls involved with configuring the background and they probably don't need to be permanently visible.
2. Enables us to layer backgrounds instead of choosing a single type.

What do you think?

[marybaum]

HAIL yes!

I've just spent my weekend looking for ways to do this with various kinds of custom CSS. It appears that if I click the button on an Image block that lets me add text, the Image block becomes a Cover block. And since what I really want is an image of a plaque with copy and text in various places, I at a minimum want to set the background-size on the damn thing to Contain.

For the moment I'm exporting png images from XD and using them as the featured image, which gets me most of the way there in terms of setting the category archive and the posts, but D. A. Y. U. M. it would be nice to set the plaque as the background and edit the type from there, since these things are going to change, and there are likely to be more of them.

[Ren2049]

Wouldn't it be better to have backgrounds on a section by section basis to cover both, sections within pages (which can have different background images) and posts (tall content section)? I've used the cover block as a section wrapper for this purpose but it's still buggy. #50610 (comment)

[porg]

#14744 deals with this too, with the widely expressed opinion in the discussion that the "Group Block" as the main block for structuring/nesting should have the full background styling capabilities (like images too), and that the "Cover Block" seems then somehow superfluous.

[porg]

Closed as "completed" — How? Please elaborate.

[henriqueiamarino]

As far as I understand, it has already been implemented, @porg; screenshot below.

Now, when working on a block element, you can set Text color, Background color, and Background Image, just as I required.

[porg]

Great then!

• For transparency/comprehension reasons please always provide an explicit close comment, what was solved/how, and what may remained open, and where else that progress may continue. Thanks!