Add background image settings to components

[swashbuck]

Subject of the enhancement

Currently, you can add a background image to articles and blocks but not components. It would be useful to have this feature for components as well.

For components, I would suggest that we add _backgroundImage and _backgroundStyles:

"_vanilla": {
  "_backgroundImage": {
    "_xlarge": "",
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_backgroundStyles": {
    "_backgroundSize": "",
    "_backgroundRepeat": "",
    "_backgroundPosition": ""
  }
}

Screenshots

Here is an example from a project that we are working on. Notice the pattern behind the component text.

[swashbuck]

@guywillis pointed out that this currently works in the FW. However, the necessary CSS for the background layer is missing. So, it won't work without this:

.component.has-bg-image > .background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}
.component.has-bg-image .component__inner {
  position: relative;
}

This CSS addition to component.less should be included in this PR.

[swashbuck]

For this PR, should we just add the missing CSS and skip the schema / AAT configurable options? What does everyone think?

[oliverfoster]

Seems fair. Make a note on Dan's issue that component backgrounds are needed and used also?

[github-actions]

🎉 This issue has been resolved in version 9.17.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀