Add a specific class when having background bg-color, bg-image, bg-video options

Problem/Motivation

#3213112: Add a specific class when having sections with background color, image, or video option
Needs to add a specific class when having background image option.
Having no custom styling selector for sections
to have advance styling for section with background.
bg-image, bg-color, bg-video

Steps to reproduce

Given that a Landing page with Layout Builder had number of sections
And number of sections do have a background color
And some sections have a background image or background video
When trying to select and custom style all sections with BG colors only
And same for BG images or videos
But with other styling
Then no direct way to select selections with BG colors, or BG image

Proposed resolution

Have the same as in the following issue #3213112: Add a specific class when having sections with background color, image, or video option

1. bg-color
2. bg-image
3. bg-video

Remaining tasks

• ✅ File an issue about this project
• ✅ Add bg-color, bg-image, bg-video classes for sections with backgrounds
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Release varbase-9.0.3, varbase_layout_builder-10.0.7

User interface changes

In the case of having 3 sections as in the following image

The HTML will have the following selectors for the 3 sections

API changes

• N/A

Data model changes

• N/A