Fix rendering both Background Color and Background Image or Video

Problem/Motivation

When using a background image on a section, background color and background image settings are ignored. Because users may not be able to display the video (say, on mobile devices), the background image and color should also be rendered. This is a major UX issue for accessibility and responsiveness and must be resolved.

Steps to reproduce

Create a section. In Style > Background settings, select a color, add an image and a background video. Save.
Expect all three to be rendered, but only the background video is.

Scenario: Configuring Background Image and Color in a Section
Given Bootstrap Styles and Bootstrap Layout Builder are configured for a selected content
When an editor adds a new section
And selects a Background Image for the section
And saves the section configurations
Then the section will display the selected background image
When the editor edits the same section for the second time
And adds a Background Color to it
And saves the section configurations
Then the section will show the Background Color
But not the Background Image
When the editor edits the same section for the third time
Then the background Image will still be present in the settings UI form element
When the editor saves only the section settings
Then the Background Image will be displayed
And the last selected Background Color will not be displayed

Proposed resolution

Render everything that is set under Style > Background. I'm currently studying the module to determine why it functions differently from v1. I expect that it's due to the separation of the templates that is implemented in Bootstrap Styles module, but not sure. If this is more appropriate in that module's issue queue, please feel free to move it.

The UI/UX behavior should match the chosen values. Have the status which following the settings UI selection. When all three options are set, they should all appear on the section on top of each other.

If the section settings form includes a Background Color, it should show on the page.
If a Background Image or Background Video in the section settings form was selected, it should render on the page.

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ✅ Testing to ensure no regression
• ➖ Automated unit testing coverage
• ➖ Automated functional testing coverage
• ➖ UX/UI designer responsibilities
• ✅ Readability
• ✅ Accessibility
• ➖ Performance
• ➖ Security
• ➖ Documentation
• ✅ Code review by maintainers
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Release notes snippet
• ✅ Release bootstrap_styles-1.1.2

User interface changes

None. In fact, the module should function as the UI implies -- that setting all three will result in all three being rendered.

API changes

• N/A

Data model changes

Probably none, but unknown.

Section config should serialized data, and should match with the interface
On loading of old saved default config
When changed from the UI and saved, section config should change.
The build or render of the section should match too

Release notes snippet

• Issue #3221526: Fixed rendering both Background Color and Background Image or Video