diff --git a/browser/base/content/browser-addons.js b/browser/base/content/browser-addons.js
index 9f993da70169..378437b2be7b 100644
--- a/browser/base/content/browser-addons.js
+++ b/browser/base/content/browser-addons.js
@@ -794,7 +794,18 @@ var LightWeightThemeWebInstaller = {
  * Listen for Lightweight Theme styling changes and update the browser's theme accordingly.
  */
 var LightweightThemeListener = {
+  _modifiedStyles: [],
+
   init() {
+    XPCOMUtils.defineLazyGetter(this, "styleSheet", function() {
+      for (let i = document.styleSheets.length - 1; i >= 0; i--) {
+        let sheet = document.styleSheets[i];
+        if (sheet.href == "chrome://browser/skin/browser-lightweightTheme.css")
+          return sheet;
+      }
+      return undefined;
+    });
+
     Services.obs.addObserver(this, "lightweight-theme-styling-update", false);
     Services.obs.addObserver(this, "lightweight-theme-optimized", false);
     if (document.documentElement.hasAttribute("lwtheme"))
@@ -807,18 +818,44 @@ var LightweightThemeListener = {
   },
 
   /**
-   * Set the headerImage to a CSS variable which is used to apply the background-image
-   * property of all rulesets in browser-lightweightTheme.css.
+   * Append the headerImage to the background-image property of all rulesets in
+   * browser-lightweightTheme.css.
    *
    * @param headerImage - a string containing a CSS image for the lightweight theme header.
    */
   updateStyleSheet(headerImage) {
-    document.documentElement.style.setProperty("--lwt-header-image", headerImage);
-},
+    if (!this.styleSheet)
+      return;
+    this.substituteRules(this.styleSheet.cssRules, headerImage);
+  },
+
+  substituteRules(ruleList, headerImage, existingStyleRulesModified = 0) {
+    let styleRulesModified = 0;
+    for (let i = 0; i < ruleList.length; i++) {
+      let rule = ruleList[i];
+      if (rule instanceof Ci.nsIDOMCSSGroupingRule) {
+        // Add the number of modified sub-rules to the modified count
+        styleRulesModified += this.substituteRules(rule.cssRules, headerImage, existingStyleRulesModified + styleRulesModified);
+      } else if (rule instanceof Ci.nsIDOMCSSStyleRule) {
+        if (!rule.style.backgroundImage)
+          continue;
+        let modifiedIndex = existingStyleRulesModified + styleRulesModified;
+        if (!this._modifiedStyles[modifiedIndex])
+          this._modifiedStyles[modifiedIndex] = { backgroundImage: rule.style.backgroundImage };
+
+        rule.style.backgroundImage = this._modifiedStyles[modifiedIndex].backgroundImage + ", " + headerImage;
+        styleRulesModified++;
+      } else {
+        Cu.reportError("Unsupported rule encountered");
+      }
+    }
+    return styleRulesModified;
+  },
+
   // nsIObserver
   observe(aSubject, aTopic, aData) {
-    if (aTopic != "lightweight-theme-styling-update" &&
-        aTopic != "lightweight-theme-optimized")
+    if ((aTopic != "lightweight-theme-styling-update" && aTopic != "lightweight-theme-optimized") ||
+          !this.styleSheet)
       return;
 
     if (aTopic == "lightweight-theme-optimized" && aSubject != window)
diff --git a/browser/themes/linux/browser-lightweightTheme.css b/browser/themes/linux/browser-lightweightTheme.css
index 27ac66c739e4..d3109bec319d 100644
--- a/browser/themes/linux/browser-lightweightTheme.css
+++ b/browser/themes/linux/browser-lightweightTheme.css
@@ -6,8 +6,8 @@
 %filter substitution
 
 /*
- * LightweightThemeListener will set the current lightweight theme's header
- * image to the lwt-header-image variable, used in each of the following rulesets.
+ * LightweightThemeListener will append the current lightweight theme's header
+ * image to the background-image for each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
@@ -15,7 +15,7 @@
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before {
   background-attachment: scroll, fixed;
   background-color: transparent;
-  background-image: @fgTabTextureLWT@, var(--lwt-header-image);
+  background-image: @fgTabTextureLWT@;/*, lwtHeader;*/
   background-position: 0 0, right top;
   background-repeat: repeat-x, no-repeat;
 }
@@ -24,8 +24,8 @@
   background-attachment: scroll, scroll, fixed;
   background-color: transparent;
   background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTextureLWT@,
-                    var(--lwt-header-image);
+                    @fgTabTextureLWT@;/*,
+                    lwtHeader;*/
   background-position: 0 0, 0 0, right top;
   background-repeat: repeat-x, repeat-x, no-repeat;
 }
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index 0b3c043e9378..391c296d3251 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -38,8 +38,6 @@
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDShadow;
-
-  --lwt-header-image: none;
 }
 
 #menubar-items {
diff --git a/browser/themes/osx/browser-lightweightTheme.css b/browser/themes/osx/browser-lightweightTheme.css
index 7b9587e1c9c3..aeae9d9250f7 100644
--- a/browser/themes/osx/browser-lightweightTheme.css
+++ b/browser/themes/osx/browser-lightweightTheme.css
@@ -5,8 +5,8 @@
 %include shared.inc
 
 /*
- * LightweightThemeListener will set the current lightweight theme's header
- * image to the lwt-header-image variable, used in each of the following rulesets.
+ * LightweightThemeListener will append the current lightweight theme's header
+ * image to the background-image for each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
@@ -14,7 +14,7 @@
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before {
   background-attachment: scroll, fixed;
   background-color: transparent;
-  background-image: @fgTabTextureLWT@, var(--lwt-header-image);
+  background-image: @fgTabTextureLWT@;/*, lwtHeader;*/
   background-position: 0 0, right top;
   background-repeat: repeat-x, no-repeat;
 }
@@ -23,8 +23,8 @@
   background-attachment: scroll, scroll, fixed;
   background-color: transparent;
   background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTextureLWT@,
-                    var(--lwt-header-image);
+                    @fgTabTextureLWT@;/*,
+                    lwtHeader;*/
   background-position: 0 0, 0 0, right top;
   background-repeat: repeat-x, repeat-x, no-repeat;
 }
@@ -32,7 +32,7 @@
 @media (min-resolution: 2dppx) {
   #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
     background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
-                      @fgTabTextureLWT@,
-                      var(--lwt-header-image);
+                      @fgTabTextureLWT@;/*,
+                      lwtHeader;*/
   }
 }
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index bc8eee0fb7ca..a1161185a327 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -49,8 +49,6 @@
   --arrowpanel-dimmed-even-further: hsla(210,4%,10%,.17);
 
   --urlbar-separator-color: hsla(0,0%,16%,.2);
-
-  --lwt-header-image: none;
 }
 
 #urlbar:-moz-lwtheme:not([focused="true"]),
diff --git a/browser/themes/windows/browser-lightweightTheme.css b/browser/themes/windows/browser-lightweightTheme.css
index b6c518d4a604..d2a1b840c003 100644
--- a/browser/themes/windows/browser-lightweightTheme.css
+++ b/browser/themes/windows/browser-lightweightTheme.css
@@ -6,8 +6,8 @@
 %filter substitution
 
 /*
- * LightweightThemeListener will set the current lightweight theme's header
- * image to the lwt-header-image variable, used in each of the following rulesets.
+ * LightweightThemeListener will append the current lightweight theme's header
+ * image to the background-image for each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
@@ -15,7 +15,7 @@
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end[selected=true]:-moz-lwtheme::before {
   background-attachment: scroll, fixed;
   background-color: transparent;
-  background-image: @fgTabTextureLWT@, var(--lwt-header-image);
+  background-image: @fgTabTextureLWT@;/*, lwtHeader;*/
   background-position: 0 0, right top;
   background-repeat: repeat-x, no-repeat;
 }
@@ -24,8 +24,8 @@
   background-attachment: scroll, scroll, fixed;
   background-color: transparent;
   background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
-                    @fgTabTextureLWT@,
-                    var(--lwt-header-image);
+                    @fgTabTextureLWT@;/*,
+                    lwtHeader;*/
   background-position: 0 0, 0 0, right top;
   background-repeat: repeat-x, repeat-x, no-repeat;
 }
@@ -33,7 +33,7 @@
 @media (min-resolution: 1.25dppx) {
   #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle[selected=true]:-moz-lwtheme {
     background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
-                      @fgTabTextureLWT@,
-                      var(--lwt-header-image);
+                      @fgTabTextureLWT@;/*,
+                      lwtHeader;*/
   }
 }
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 8551636eefa4..ca3710b8bf21 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -51,8 +51,6 @@
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
   --urlbar-separator-color: ThreeDLightShadow;
-
-  --lwt-header-image: none;
 }
 
 @media (-moz-windows-default-theme) {