Container Background Demo

What we're trying to accomplish is to add a full-width background color to a Panel that contains one or more Widgets.

We have Code Editor access and the ability to do this for some Widgets, as long as their layout spans the full screen width. For example, all of the Collections - Slides widgets work great, because we can target their container with a small snippet of CSS:

.contentRender_name_plugins_collections_template_custom_imagebox_grid {
    background-color: LightGray;
    padding-top: 30px;
    padding-bottom: 30px;
}

(That background container would apply to all Collections - Slides - Image Box - Grid elements globally, but that's fine because we want to maintain sitewide visual consistency.)

See the working example below (we've included the CSS in a <style> tag here for demo purposes, but it would of course be moved to the global stylesheet if this were to go live):

But this strategy doesn't work for Widgets that need to be reigned in by a Controlled-width container layout.

For example, the plain old Text widgets below:

This is a Text Widget within a Controlled-width Container. Much better visually! But we can't reliably target its full-width container with CSS (without using a brittle .contentRender_x class, as I'm doing for this demo).

So what we're hoping for: would it be possible to add another selectable attribute to the Container panel? Something like "Variation" or "Color" or "Style" to choose from a few predetermined styles that we could add in the global stylesheet? Or even a "CSS Class" for more flexibility if we need to expand the options down the road?

Or maybe there's a better approach that we haven't considered?