diff --git a/core/src/main/resources/lib/form/helpArea.jelly b/core/src/main/resources/lib/form/helpArea.jelly
index 4b40a3e04553..721748914ddc 100644
--- a/core/src/main/resources/lib/form/helpArea.jelly
+++ b/core/src/main/resources/lib/form/helpArea.jelly
@@ -27,7 +27,7 @@ THE SOFTWARE.
   <st:documentation>
     Place holder to lazy-load help text via AJAX.
   </st:documentation>
-  <div class="help-area">
+  <div class="help-area tr">
       <div class="help">${%Loading...}</div>
   </div>
 </j:jelly>
diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less
index 2786bf282877..8c2514853cc3 100644
--- a/war/src/main/js/widgets/config/tabbar.less
+++ b/war/src/main/js/widgets/config/tabbar.less
@@ -192,11 +192,6 @@
         }
       }
 
-      // Help & descriptions
-      .help {
-        background: var(--configure-job-help-area-bg-color);
-      }
-
       p,
       .help,
       .setting-description {
diff --git a/war/src/main/less/base/style.less b/war/src/main/less/base/style.less
index 3a303956dbcd..628c1bd3b45d 100644
--- a/war/src/main/less/base/style.less
+++ b/war/src/main/less/base/style.less
@@ -632,12 +632,26 @@ label.attach-previous {
 /* ====================== help ===================================== */
 
 .help {
+  position: relative;
   display: none;  /* hidden until loaded */
-  background-color: var(--help-area-bg-color);
   padding: 1rem;
   margin: 1rem 0;
   word-break: break-word;
   border-radius: 6px;
+  z-index: 0;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: var(--text-color);
+    opacity: 0.05;
+    z-index: -1;
+    border-radius: inherit;
+  }
 
   p:first-of-type {
     margin-top: 0;