Easy way to use background in a block

Hi,
Are you saying that by setting the selector as #block-BLOCKMACHINENAME the background image will display on the block it is added to? Or is this just for one specific block? It would be great to be able to set a selector that allows you to create multiple blocks with background images.

Hi there.
I managed to create the background image as per your description, it worked, but I'm unable to add text over the image. Any ideas? Thanks in advance.

I managed to get it to work by installing block_token.

You can then set it in the media manage display to .block-plugin-id--block-content-[block_content:uuid]

Oops. I tell a lie, you can't use a media field as the block tokens aren't exposed to the media view modes. You have to use a normal image field on the custom block type, then you can use the class above to target the background of that specific block.

@Hitby
Thanks for your reply. I don't quite follow your approach to this problem and wondered if you could make it a little clearer. regards and thanks.

No worries,
Pretty much as the OP said.

Install bg_image_formatter and block_class

Under Structure > Custom Block Library > Block Types (admin/structure/block/block-content/types) add a new block type, call it what you will, I called mine Block with Background Image (fancy!).

Manage the fields and add an image field (required, limited to 1). Under Manage display for the field change the format to Background Image (provided by this module).

Under settings for the Selector(s) use .block-plugin-id--block-content-[block_content:uuid]

This might not be exactly right depending on the theme you're using so after creating a block using this block type, inspect it and look for the class containing the uuid. It's a long random string (in adaptivetheme)
i.e. block-plugin-id--block-content-b6ea9b0d-9824-413f-99e4-e2fde0e532a0

Set the other settings as you want them, I generally use center center, scroll, no-repeat, cover.

Save your settings. Assign your block to a region and the block will have the image you uploaded as the background, then you can theme the content over the top.

Hope this helps,

Hearing aids ???

To show how the background image works and then you can style over the top :-)

I tried #6 and it did not work for me. I tried with the token block-plugin-id--block-content9044e354-4488-48bd-967b-49c688388e3e but it only works with body. If I try with any other token no background image :(

I am using Drupal-8.7.3 with the Showcase Lite theme. I am *new* so forgive my ignorance. I am able to get through steps 1 and 2 above however, when I get to 3: (On the newly created blocktype, go to "Manage fields") I am stuck. I don't see "Manage fields". Must I enable that somewhere?

While viewing the demo site I see that it looks possible:

Road Kill, did you figure it out? Looks like you're missing a - in your class after content.

@htownhipchick - You should have the tabs at /admin/structure/block/block-content/manage/[your-block-machine-name]

I installed the Background Images Formatter and enabled it under modules, but the option to manage fields is not present. I went back and read the article more thoroughly and realized I did not have the dependency modules installed. I installed those modules but went further down the rabbit hole with those installations. And "views" was very confusing too. Guess I am just not smart enough for this. I spent an hour today on this and still no further along. All I want to do is to create a repeating background image in the banner area. I will continue more on another day. Thank you for your response.

Hm. Works not like intended for me:

With theme "mayo" the picture is not shown as background of the custom block, but as background of the surrounding space of the page layout.

With theme "bartik" i see only very short the background picture and bartik takes the whole space so I see nothing of the background picture.

Standard css.selector is body. So I have to look for the css-selector of my block ??

Not really easy ... :-(

Thanks Hitby #6
But the right css sekector, at list in my case, is .block-block-content[block_content:uuid] (no dash between content and the token)

Any way to do this with Display suite and custom blocks?

When I add a custom block in display suite, it doesn't add the class.