set background from mobile to desktop

adobecom · Dec 17, 2024 · a504d87 · a504d87
1 parent e874e90
commit a504d87
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/express/blocks/how-to-steps-accordion/how-to-steps-accordion.css b/express/blocks/how-to-steps-accordion/how-to-steps-accordion.css
@@ -90,18 +90,11 @@ main .how-to-steps-accordion .steps-content {
 
 main .how-to-steps-accordion .steps-content .steps-content-backg {
   position: absolute;
-  width: 116%;
-  top: -42px;
-  left: -36px;
+  width: 100%;
+  top: -88px;
   z-index: -1;
-}
-
-main .how-to-steps-accordion.image .steps-content .steps-content-backg {
-  top: -51px;
-}
-
-main .how-to-steps-accordion .steps-content .steps-content-backg img {
-  width: 100%
+  height: 100%;
+  background-size: cover;
 }
 
 main .how-to-steps-accordion ol.steps {
@@ -179,6 +172,11 @@ main .how-to-steps-accordion.image {
   main .how-to-steps-accordion .steps-content .steps {
     padding-left: 20px;
   }
+
+  main .how-to-steps-accordion .steps-content .steps-content-backg {
+    left: -90px;
+    width: 67%;
+  }
 }
 
 @media (min-width: 1280px) {

diff --git a/express/blocks/how-to-steps-accordion/how-to-steps-accordion.js b/express/blocks/how-to-steps-accordion/how-to-steps-accordion.js
@@ -90,11 +90,11 @@ export default async function decorate(block) {
 
     if (hasBackground) {
       // So that background image goes beyond container
-      // const stepsContentBackground = createTag('div', { class: 'steps-content-backg' });
-      // const stepsContentBackgroundImg = createTag('img', { class: 'steps-content-backg-image' });
-      // stepsContent.append(stepsContentBackground);
-      // stepsContentBackground.append(stepsContentBackgroundImg);
-      // stepsContentBackgroundImg.src = backgroundURL;
+      const stepsContentBackground = createTag('div', { class: 'steps-content-backg' });
+      const stepsContentBackgroundImg = createTag('img', { class: 'steps-content-backg-image' });
+      stepsContent.append(stepsContentBackground);
+      stepsContentBackground.append(stepsContentBackgroundImg);
+      stepsContentBackgroundImg.src = backgroundURL;
     }
 
     if (isVideoVariant) {