Add a colour overlay + opacity option for Background Image

Problem/Motivation

The Background Media plugin lets you set an image as a section/block background, and the Background Color plugin lets you pick a solid colour — but the two are mutually exclusive (background_type is either color or image). There's currently no way to layer a colour wash on top of a background image to improve text/content readability, short of picking a different (darker) image.

This came up from a real editorial need: an editor wants to place a dark, semi-transparent overlay over a background photo so that white text on top of it stays legible, while still keeping the photo visible underneath - similar to the "scrim" pattern common in hero/banner components.

Proposed resolution

Add two new fields to the background_media style plugin, shown only when Background type is Image:

• Overlay color — a native picker.
• Overlay opacity — a range slider (0–100%, step 5), with a live percentage readout next to it.

Rendering: the overlay is applied as a linear-gradient(rgba(...), rgba(...)) layer stacked before the image url() in the same background-image CSS property, so it's automatically clipped to the same box as the background image - no extra markup needed.

API changes

None breaking.

Data model changes

Adds a background_overlay mapping (color: string, opacity: integer) to the bootstrap_styles.container_wrapper config schema. Optional/backwards compatible — existing layouts without this key are unaffected (opacity defaults to 0, i.e. no overlay).