How to display and style captions for group background images

WordPress 6.4 introduced the possibility to add a background image to groups. This opens a lot of new design variations.

As with any other type of image, Image Source Control can be used to display the source and author of such an image as an overlay above the image, listed below the post, or a dedicated global image index.

This tutorial shows how to display the author’s information as an overlay above the group.

Look at the following screenshot with an example image and text generated with ChatGPT and DALL·E 3. See the image caption added automatically by Image Source Control on the top right.

Group Background Images

Unless you haven’t used the background image option for groups, yet, here is a quick overview on how to add it.

1. In the List View on the left, you see the group with a headline and text.
2. Choose the group in the List View or editor to see its options on the right.
3. Select the Styles section.
4. Find the Background option to select the background image for the group.

How to add the image attribution

You can manage the image attribution, including the author, source URL, and additional licensing information, through the media library.

First, download and install Image Source Control.

Now go to Media > Library and select the image. You should see the image source fields like in the following example.

Enter the information relevant to the image in use. For my showcase, I just entered “DALL·E 3” into the Image Source field.

Managing the image sources in a central place like this ensures they are automatically displayed wherever you need them, as an image caption overlay, below posts using specific images, or the global image index list.

Showing the image source as an overlay

Since WordPress core tends to make changes to new features and to see how this is used, I decided not to display overlays for group block background images by default. You need to enable that support and might want to customize styling.

1. Enable support for inline styles

Technically, the group background image is inserted as an inline CSS style into the group container. That is a challenging position for displaying an image caption or overlay. Image Source Control has supported such images for a while now, and was updated with minor tweaks to work also with group background images.

Go to Settings > Image Source Control > Included Images > Developer Options and check “Display the overlay within HTML tags that use inline styles”.

To learn more about the technical background of the Developer Options, see Displaying Image Captions for Background Images.

2. Style the overlay

By default, the source overlay shows up as a new HTML element within the group.

You can style the image caption according to your preferences using custom CSS.

The CSS rule I used in my example below is

.wp-block-group > .isc-source-text {
    font-size: 0.8em;
    background-color: #333;
    color: #fff;
    opacity: 0.70;
    padding: 0.15em;
    float: right;
}Code language: CSS (css)

This CSS style places the image caption as an overlay at the top right of the group, not pushing the rest of the content down.

Depending on your images and their content, you might want to change the individual values or create CSS rules for different cases.

Show me your implementation

I am writing this tutorial shortly before the release of WordPress 6.4. There might be last-minute changes in their implementation. I also want to see how you are actually using background images for group blocks to see which additional options to the ones mentioned above you need.

If you use source attributions for group background images, then please show me your implementation. It will help shape native support in Image Source Control.