brand [Modification Request] CTA Banner to support a background image

Summary

As part of the Newsroom project, we've added a one-off style override for our CTA Banner to support a background image (example at https://github.com/newsroom - scroll close to bottom to see it).

Screenshot

We've had additional requests to use this pattern on other templates, so we'd like to standardize using a background image in the CTA Banner so it can be added as a field in our CMS.

Implementation Details

There is a possible conflict here with the useBackground property, as that could be confusing while also using a background image.

Urgency

This is being asked for as a standard for other templates, but we do have a workaround for now (though each use case accrues some minor tech debt).

Sep 16 '24 15:09 jjwinskill

Thanks for this @jjwinskill.

There's a somewhat related discussion ongoing in https://github.com/primer/brand/issues/752 too, so we can potentially tackle both of these issues together.

Sep 17 '24 13:09 joshfarrant

I caught up with @simurai that is building the new feature pages where he has been using image backgrounds for the CTA Banners

We'd love to have a background component background prop with primary, subtle, image - on both CTAbanner and breakoutBanner

Here is an example of image based CTA banner on the discussion feature page:

Sep 24 '24 23:09 nsolerieu