diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
index ab2aad4650..04ab02bcb8 100644
--- a/lib/text/ui_text_displayer.js
+++ b/lib/text/ui_text_displayer.js
@@ -352,19 +352,22 @@ shaka.text.UITextDisplayer = class {
       type = 'br';
     }
 
+    const needWrapper = !isNested && cue.nestedCues.length > 0;
+
     // Nested cues are inline elements.  Top-level cues are block elements.
     const cueElement = shaka.util.Dom.createHTMLElement(type);
     if (type != 'br') {
-      this.setCaptionStyles_(cueElement, cue, parents);
+      this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
     }
 
     let wrapper = cueElement;
-    if (!isNested && cue.nestedCues.length) {
+    if (needWrapper) {
       // Create a wrapper element which will serve to contain all children into
       // a single item.  This ensures that nested span elements appear
       // horizontally and br elements occupy no vertical space.
       wrapper = shaka.util.Dom.createHTMLElement('span');
       wrapper.classList.add('shaka-text-wrapper');
+      wrapper.style.backgroundColor = cue.backgroundColor;
       cueElement.appendChild(wrapper);
     }
 
@@ -375,9 +378,10 @@ shaka.text.UITextDisplayer = class {
    * @param {!HTMLElement} cueElement
    * @param {!shaka.extern.Cue} cue
    * @param {!Array.<!shaka.extern.Cue>} parents
+   * @param {boolean} hasWrapper
    * @private
    */
-  setCaptionStyles_(cueElement, cue, parents) {
+  setCaptionStyles_(cueElement, cue, parents, hasWrapper) {
     const Cue = shaka.text.Cue;
     const inherit =
         (cb) => shaka.text.UITextDisplayer.inheritProperty_(parents, cb);
@@ -434,13 +438,15 @@ shaka.text.UITextDisplayer = class {
       if (cue.border) {
         elem.style.border = cue.border;
       }
-      const bgColor = inherit((c) => c.backgroundColor);
-      if (bgColor) {
-        elem.style.backgroundColor = bgColor;
-      } else if (text) {
-        // If there is no background, default to a semi-transparent black.
-        // Only do this for the text itself.
-        elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+      if (!hasWrapper) {
+        const bgColor = inherit((c) => c.backgroundColor);
+        if (bgColor) {
+          elem.style.backgroundColor = bgColor;
+        } else if (text) {
+          // If there is no background, default to a semi-transparent black.
+          // Only do this for the text itself.
+          elem.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+        }
       }
       if (text) {
         elem.textContent = text;