[Modification Request] Add background image props to Hero component

[jjwinskill]

Many Primer Brand components, like Section and BreakoutBanner, follow a common pattern of accepting props that support a background image. We'd like to extend this pattern to the Hero component so we don't need a bespoke solution to using a background image with the Hero.

Specifically, would it be possible to add the following properties to the Hero component? (here I'm using packages/react/src/Section/Section.tsx for the sub types):

backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap
backgroundImageSrc?: string | string[] | ResponsiveBackgroundImageSrcMap
backgroundImagePosition?: string | string[] | ResponsiveBackgroundImagePositionMap
backgroundImageSize?: string | string[] | ResponsiveBackgroundImageSizeMap

This is similar to a separate request for the CTA banner #756

[rezrah]

Hi @jjwinskill 👋, thanks for putting in this request...

Do you have examples (either designs or production pages) where you are applying background images directly to Hero?

Asking because Hero is internally grid-constrained, and therefore not suitable for applying background images directly to. Instead, you'll want to apply background colors and images to a parent Section, and allow the Hero to align automatically inside of it.

Let us know if that approach works for you, or doesn't. I'd be curious to learn how you're planning to use those background options should we make them available.