Fix rendering both Background Color and Background Image or Video

I'm facing the same problem where if I add the image first and then the background color, the background image disappears.

I confirm the issue!

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.

Steps to reproduce

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

Find out that the Background type is a filed type of radios
When editors click on the color, image, video tab option, they are selecting a radios form element value.
Which will be saved

Needs more review and testing before committing

• ➖ Testing to ensure no regression
• ➖ Full testing and approval

Patch #12 works for me
Thank you Rajab

After further testing and applying the patch to projects
I faced the following warnings

Warning: Trying to access array offset on value of type null in Drupal\bootstrap_styles\Plugin\BootstrapStyles\Style\BackgroundColor->buildStyleFormElements() (line 62
Warning: Trying to access array offset on value of type null in Drupal\bootstrap_styles\Plugin\BootstrapStyles\Style\BackgroundColor->buildStyleFormElements() (line 61
Warning: Undefined array key "background" in Drupal\bootstrap_styles\Plugin\BootstrapStyles\Style\BackgroundColor->buildStyleFormElements() (line 62
Warning: Undefined array key "background" in Drupal\bootstrap_styles\Plugin\BootstrapStyles\Style\BackgroundColor->buildStyleFormElements() (line 62

Thanks, Ahmad, for testing and following up on the issue.

Our wait on committing came with good capturing of warnings and other issues

✅ Released bootstrap_styles-1.1.2 →

Automatically closed - issue fixed for 2 weeks with no activity.