From 69e951d47e87c93ff82a1cdfa6e55848f9ec2908 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Fri, 11 Jul 2025 13:55:49 +0200
Subject: [PATCH] [IMP] test_themes, theme_*: adapt themes for new parallax
 structure

This commit adapts the themes to the new Parallax effect structure.
We now wrap the parallax element in another element with
"overflow: hidden" to avoid setting "overflow: hidden" on sections.
That was causing elements like the dropdown of the search bar to be cut
off and not fully visible.

task-4926420

closes odoo/design-themes#1114

Related: odoo/odoo#218296
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 test_themes/tests/test_new_page_templates.py       | 12 +++++++++++-
 .../views/snippets/s_pricelist_boxed.xml           |  4 ++--
 theme_artists/views/snippets/s_cover.xml           |  4 ++--
 theme_artists/views/snippets/s_pricelist_boxed.xml |  4 ++--
 theme_artists/views/snippets/s_title.xml           |  6 ++++--
 theme_avantgarde/views/customizations.xml          |  3 ++-
 theme_bewise/views/customizations.xml              |  2 +-
 theme_bistro/views/snippets/s_image_title.xml      |  4 +++-
 theme_bistro/views/snippets/s_product_catalog.xml  |  4 +++-
 theme_bookstore/views/snippets/s_cover.xml         |  2 +-
 .../views/snippets/s_pricelist_boxed.xml           |  4 ++--
 theme_buzzy/views/snippets/s_pricelist_boxed.xml   |  4 ++--
 theme_clean/views/snippets/s_pricelist_boxed.xml   |  4 ++--
 theme_clean/views/snippets/s_product_catalog.xml   |  4 +++-
 theme_cobalt/views/customizations.xml              |  4 ++--
 theme_enark/views/snippets/s_banner.xml            |  4 +++-
 theme_graphene/views/customizations.xml            | 14 ++++++++------
 theme_kea/views/snippets/s_cover.xml               |  2 +-
 theme_kea/views/snippets/s_pricelist_boxed.xml     |  4 ++--
 theme_kiddo/views/snippets/s_pricelist_boxed.xml   |  4 ++--
 theme_loftspace/views/snippets/s_title.xml         |  4 +++-
 theme_monglia/views/customizations.xml             |  4 ++--
 theme_nano/views/snippets/s_cover.xml              |  2 +-
 theme_notes/views/snippets/s_pricelist_boxed.xml   |  4 ++--
 theme_notes/views/snippets/s_product_catalog.xml   |  6 ++++--
 .../views/snippets/s_pricelist_boxed.xml           |  4 ++--
 theme_orchid/views/snippets/s_kickoff.xml          |  2 +-
 theme_paptic/views/customizations.xml              |  4 ++--
 .../views/snippets/s_pricelist_boxed.xml           |  4 ++--
 theme_treehouse/views/snippets/s_title.xml         |  4 +++-
 theme_yes/views/snippets/s_kickoff.xml             |  4 ++--
 theme_zap/views/snippets/s_banner.xml              |  4 +++-
 theme_zap/views/snippets/s_pricelist_boxed.xml     |  4 ++--
 33 files changed, 87 insertions(+), 56 deletions(-)

diff --git a/test_themes/tests/test_new_page_templates.py b/test_themes/tests/test_new_page_templates.py
index 9709ab7c6..00ca9d0a9 100644
--- a/test_themes/tests/test_new_page_templates.py
+++ b/test_themes/tests/test_new_page_templates.py
@@ -96,7 +96,7 @@ S_CLASSES_WHITELIST = [
     # Classes that rightfully belong here at the moment
     's_col_no_bgcolor', 's_col_no_resize', 's_allow_columns',
     's_nb_column_fixed', 's_dialog_preview',
-    's_parallax_is_fixed', 's_parallax_bg', 's_parallax_no_overflow_hidden',
+    's_parallax_is_fixed', 's_parallax_bg', 's_parallax_bg_wrap',
     's_carousel_cards_card', 's_timeline_card', 's_blog_posts', 's_events',
     's_appointments',
 
@@ -347,6 +347,16 @@ class TestNewPageTemplates(TransactionCase):
                                     "Using %r, view %r defines a row count on a non-grid mode row"
                                     % (theme_name, view.key)
                                 )
+
+                        for el in html_tree.xpath(".//*[contains(concat(' ', normalize-space(@class), ' '), ' s_parallax_bg ')]"):
+                            parent = el.getparent()
+                            parent_classes = parent.attrib.get('class')
+                            if parent_classes != 's_parallax_bg_wrap':
+                                errors.append(
+                                    "Using %r, view %r: element with class 's_parallax_bg' must have a direct "
+                                    "parent with 's_parallax_bg_wrap', found parent classes: %r"
+                                    % (theme_name, view.key, parent_classes)
+                                )
                     except Exception as e:  # noqa: BLE001
                         _logger.error("Using %r, view %r cannot be rendered (%r)", theme_name, view.key, e)
                         errors.append("Using %r, view %r cannot be rendered (%r)" % (theme_name, view.key, e))
diff --git a/theme_anelusia/views/snippets/s_pricelist_boxed.xml b/theme_anelusia/views/snippets/s_pricelist_boxed.xml
index bb91ab70d..ba021c14f 100644
--- a/theme_anelusia/views/snippets/s_pricelist_boxed.xml
+++ b/theme_anelusia/views/snippets/s_pricelist_boxed.xml
@@ -5,10 +5,10 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Floats/12','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Floats_12 o_we_animated"/>
     </xpath>
diff --git a/theme_artists/views/snippets/s_cover.xml b/theme_artists/views/snippets/s_cover.xml
index c59f59565..1e28bbe86 100644
--- a/theme_artists/views/snippets/s_cover.xml
+++ b/theme_artists/views/snippets/s_cover.xml
@@ -4,7 +4,7 @@
 <template id="s_cover" inherit_id="website.s_cover">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt224 pb200" remove="pt232 pb232 s_parallax_bg parallax s_parallax_is_fixed bg-black-50" separator=" "/>
+        <attribute name="class" add="pt224 pb200" remove="pt232 pb232 parallax s_parallax_is_fixed bg-black-50" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Connections/20','colors':{'c5': 'o-color-1'},'flip':['y'], 'showOnMobile':true}</attribute>
     </xpath>
     <!-- Shape -->
@@ -13,7 +13,7 @@
     </xpath>
     <!-- Remove filter & parallax -->
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace"/>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
         Emotions <br/>through the colors
diff --git a/theme_artists/views/snippets/s_pricelist_boxed.xml b/theme_artists/views/snippets/s_pricelist_boxed.xml
index b0665941c..d630fbdb3 100644
--- a/theme_artists/views/snippets/s_pricelist_boxed.xml
+++ b/theme_artists/views/snippets/s_pricelist_boxed.xml
@@ -5,10 +5,10 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Wavy/27','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Wavy_27 o_we_animated"/>
     </xpath>
diff --git a/theme_artists/views/snippets/s_title.xml b/theme_artists/views/snippets/s_title.xml
index f6c9b5602..5369cb529 100644
--- a/theme_artists/views/snippets/s_title.xml
+++ b/theme_artists/views/snippets/s_title.xml
@@ -9,7 +9,9 @@
     </xpath>
     <!-- Parallax background & filter -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image');"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image');"/>
+        </span>
         <div class="o_we_bg_filter" style="background-color: rgba(17, 13, 22, 0.85) !important;"/>
     </xpath>
     <!-- Title -->
@@ -27,7 +29,7 @@
     <xpath expr="//h2" position="attributes">
         <attribute name="class" remove="display-3-fs" separator=" "/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace"/>
 </template>
 
diff --git a/theme_avantgarde/views/customizations.xml b/theme_avantgarde/views/customizations.xml
index 0f2337b81..5ab756bc0 100644
--- a/theme_avantgarde/views/customizations.xml
+++ b/theme_avantgarde/views/customizations.xml
@@ -12,7 +12,8 @@
 <!-- ======== COVER ======== -->
 <template id="s_cover" inherit_id="website.s_cover" name="Avantgarde s_cover">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="s_parallax_no_overflow_hidden o_full_screen_height" remove="s_parallax_is_fixed s_parallax" separator=" "/>
+        <attribute name="class" add="o_full_screen_height" remove="s_parallax_is_fixed" separator=" "/>
+        <attribute name="data-scroll-background-ratio" add="1.5" remove="1"/>
     </xpath>
     <xpath expr="//span[hasclass('s_parallax_bg')]" position="attributes">
         <attribute name="style" remove="background-position: 50% 75%;" add="background-position: 50% 80%;" separator=";"/>
diff --git a/theme_bewise/views/customizations.xml b/theme_bewise/views/customizations.xml
index 5f3c7b1cf..34f94ba39 100644
--- a/theme_bewise/views/customizations.xml
+++ b/theme_bewise/views/customizations.xml
@@ -14,7 +14,7 @@
         <div class="o_we_shape o_html_builder_Rainy_08_001"/>
     </xpath>
     <!-- Remove the background image for parallax -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
         Always at the top
diff --git a/theme_bistro/views/snippets/s_image_title.xml b/theme_bistro/views/snippets/s_image_title.xml
index 7151bf0b3..9519e193a 100644
--- a/theme_bistro/views/snippets/s_image_title.xml
+++ b/theme_bistro/views/snippets/s_image_title.xml
@@ -9,7 +9,9 @@
         <attribute name="data-scroll-background-ratio">-3</attribute>
     </xpath>
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="before">
-        <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('/web/image/website.s_image_title_default_image') !important;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('/web/image/website.s_image_title_default_image') !important;"/>
+        </span>
     </xpath>
 
     <!-- Texts -->
diff --git a/theme_bistro/views/snippets/s_product_catalog.xml b/theme_bistro/views/snippets/s_product_catalog.xml
index 8eb27398c..83be34095 100644
--- a/theme_bistro/views/snippets/s_product_catalog.xml
+++ b/theme_bistro/views/snippets/s_product_catalog.xml
@@ -9,7 +9,9 @@
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_product_catalog_default_image'); background-position: 50% 0%;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_product_catalog_default_image'); background-position: 50% 0%;"/>
+        </span>
         <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Remove Title & lead -->
diff --git a/theme_bookstore/views/snippets/s_cover.xml b/theme_bookstore/views/snippets/s_cover.xml
index b49ef66cb..5a96b38b8 100644
--- a/theme_bookstore/views/snippets/s_cover.xml
+++ b/theme_bookstore/views/snippets/s_cover.xml
@@ -14,7 +14,7 @@
         <div class="o_we_shape o_html_builder_Bold_26" style="background-image: url('/html_editor/shape/html_builder/Bold/26.svg?c5=o-color-1');"/>
     </xpath>
     <!-- Disable Parallax -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
         Immerse yourself <br/>in original universes
diff --git a/theme_bookstore/views/snippets/s_pricelist_boxed.xml b/theme_bookstore/views/snippets/s_pricelist_boxed.xml
index 740a843f4..f474cb031 100644
--- a/theme_bookstore/views/snippets/s_pricelist_boxed.xml
+++ b/theme_bookstore/views/snippets/s_pricelist_boxed.xml
@@ -5,7 +5,7 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Airy/13_002','colors':{'c5':'o-color-1','c3':'o-color-4'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
@@ -14,7 +14,7 @@
     <xpath expr="//div[hasclass('col-lg-8')]" position="attributes">
         <attribute name="class" add="o_cc3" remove="o_cc1 rounded" separator=" "/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_buzzy/views/snippets/s_pricelist_boxed.xml b/theme_buzzy/views/snippets/s_pricelist_boxed.xml
index 33c39cdee..9a718cfbb 100644
--- a/theme_buzzy/views/snippets/s_pricelist_boxed.xml
+++ b/theme_buzzy/views/snippets/s_pricelist_boxed.xml
@@ -5,13 +5,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc3" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc3" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Bold/15','colors':{'c5': 'o-color-3'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Bold_15" style="background-image: url('/html_editor/shape/html_builder/Bold/15.svg?c5=o-color-3');"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_clean/views/snippets/s_pricelist_boxed.xml b/theme_clean/views/snippets/s_pricelist_boxed.xml
index 6a8b24225..eb5b56fa0 100644
--- a/theme_clean/views/snippets/s_pricelist_boxed.xml
+++ b/theme_clean/views/snippets/s_pricelist_boxed.xml
@@ -5,13 +5,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Connections/20','colors':{'c5': 'o-color-1'},'flip':['y'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Connections_20" style="background-image: url('/html_editor/shape/html_builder/Connections/20.svg?c5=o-color-1&amp;flip=y');  background-position: 50% 0%"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_clean/views/snippets/s_product_catalog.xml b/theme_clean/views/snippets/s_product_catalog.xml
index e0c044077..2e99d074c 100644
--- a/theme_clean/views/snippets/s_product_catalog.xml
+++ b/theme_clean/views/snippets/s_product_catalog.xml
@@ -10,7 +10,9 @@
     </xpath>
     <!-- Filter & Parallax -->
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_product_catalog_default_image');"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_product_catalog_default_image');"/>
+        </span>
         <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
 </template>
diff --git a/theme_cobalt/views/customizations.xml b/theme_cobalt/views/customizations.xml
index 2ea04a885..70773e5b6 100644
--- a/theme_cobalt/views/customizations.xml
+++ b/theme_cobalt/views/customizations.xml
@@ -344,13 +344,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Bold/01_001','colors':{'c5':'o-color-1'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Bold_01_001" style="background-image: url('/html_editor/shape/html_builder/Bold/01_001.svg?c5=o-color-1');"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_enark/views/snippets/s_banner.xml b/theme_enark/views/snippets/s_banner.xml
index 9a2c2a504..88d0b69bb 100644
--- a/theme_enark/views/snippets/s_banner.xml
+++ b/theme_enark/views/snippets/s_banner.xml
@@ -8,7 +8,9 @@
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//section/div" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+        </span>
     </xpath>
     <!-- Remove grid images -->
     <xpath expr="//div[hasclass('o_grid_item_image')]" position="replace"/>
diff --git a/theme_graphene/views/customizations.xml b/theme_graphene/views/customizations.xml
index 8562b2542..29deb2fd8 100644
--- a/theme_graphene/views/customizations.xml
+++ b/theme_graphene/views/customizations.xml
@@ -4,11 +4,11 @@
 <!-- ======== COVER ======== -->
 <template id="s_cover" inherit_id="website.s_cover" name="Graphene s_cover">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt160 pb192" remove="pt232 pb232 s_parallax_is_fixed s_parallax" separator=" "/>
+        <attribute name="class" add="pt160 pb192" remove="pt232 pb232 s_parallax_is_fixed" separator=" "/>
         <attribute name="data-scroll-background-ratio">0</attribute>
         <attribute name="style">background-image: url('/web/image/website.s_cover_default_image');</attribute>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//h1" position="replace"/>
     <xpath expr="//p" position="replace"/>
     <xpath expr="//p" position="replace"/>
@@ -268,11 +268,13 @@
 <!-- ======== NUMBERS ======== -->
 <template id="s_numbers" inherit_id="website.s_numbers" name="Graphene s_numbers">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="oe_img_bg o_bg_img_center pb56 pt56 s_parallax_no_overflow_hidden parallax s_parallax_is_fixed o_cc3" remove="pb80 pt80 o_cc1" separator=" "/>
+        <attribute name="class" add="oe_img_bg o_bg_img_center pb56 pt56 parallax s_parallax_is_fixed o_cc3" remove="pb80 pt80 o_cc1" separator=" "/>
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//section/div[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
+        </span>
         <div class="o_we_bg_filter bg-black-75"></div>
     </xpath>
 </template>
@@ -423,7 +425,7 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Airy/11_001','colors':{'c5':'rgba(0,0,0,0.25)'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
@@ -432,7 +434,7 @@
     <xpath expr="//div[hasclass('col-lg-8')]" position="attributes">
         <attribute name="class" remove="rounded" separator=" "/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_kea/views/snippets/s_cover.xml b/theme_kea/views/snippets/s_cover.xml
index d42eeccaf..8d5ac6277 100644
--- a/theme_kea/views/snippets/s_cover.xml
+++ b/theme_kea/views/snippets/s_cover.xml
@@ -13,7 +13,7 @@
         <div class="o_we_shape o_html_builder_Floats_02" style="background-image: url('/html_editor/shape/html_builder/Floats/02.svg?c1=o-color-1&amp;c2=o-color-1&amp;c3=o-color-5&amp;c4=o-color-1&amp;c5=o-color-5');"/>
     </xpath>
     <!-- Disable Parallax -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
         The Revolution <br/> in Virtual Reality
diff --git a/theme_kea/views/snippets/s_pricelist_boxed.xml b/theme_kea/views/snippets/s_pricelist_boxed.xml
index ad20f76c2..9c9c98c51 100644
--- a/theme_kea/views/snippets/s_pricelist_boxed.xml
+++ b/theme_kea/views/snippets/s_pricelist_boxed.xml
@@ -5,13 +5,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc3" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc3" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Floats/01','colors':{'c1':'o-color-1','c2':'o-color-1','c3':'o-color-1','c4':'o-color-1','c5':'o-color-1'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Floats_01 o_we_animated" style="background-image: url('/html_editor/shape/html_builder/Floats/01.svg?c1=o-color-1&amp;c2=o-color-1&amp;c3=o-color-1&amp;c4=o-color-1&amp;c5=o-color-1');"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_kiddo/views/snippets/s_pricelist_boxed.xml b/theme_kiddo/views/snippets/s_pricelist_boxed.xml
index c96e57d0a..c4aaf609b 100644
--- a/theme_kiddo/views/snippets/s_pricelist_boxed.xml
+++ b/theme_kiddo/views/snippets/s_pricelist_boxed.xml
@@ -5,13 +5,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Rainy/06','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Rainy_06"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_loftspace/views/snippets/s_title.xml b/theme_loftspace/views/snippets/s_title.xml
index 3e38055b8..ae78265bb 100644
--- a/theme_loftspace/views/snippets/s_title.xml
+++ b/theme_loftspace/views/snippets/s_title.xml
@@ -9,7 +9,9 @@
     </xpath>
     <!-- Parallax background & filter -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 50%;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 50%;"/>
+        </span>
         <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Title -->
diff --git a/theme_monglia/views/customizations.xml b/theme_monglia/views/customizations.xml
index 95ddc494b..0f6e5dc78 100644
--- a/theme_monglia/views/customizations.xml
+++ b/theme_monglia/views/customizations.xml
@@ -519,13 +519,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Bold/21','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Bold_21"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_nano/views/snippets/s_cover.xml b/theme_nano/views/snippets/s_cover.xml
index d1c125b99..2ae1dd1c6 100644
--- a/theme_nano/views/snippets/s_cover.xml
+++ b/theme_nano/views/snippets/s_cover.xml
@@ -8,7 +8,7 @@
         <attribute name="data-scroll-background-ratio">0</attribute>
         <attribute name="style">background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;</attribute>
     </xpath>
-    <xpath expr="//*[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//*[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title & Text -->
     <xpath expr="//h1" position="replace" mode="inner">
         Creative Studio
diff --git a/theme_notes/views/snippets/s_pricelist_boxed.xml b/theme_notes/views/snippets/s_pricelist_boxed.xml
index 5aa38682f..bbd26c21f 100644
--- a/theme_notes/views/snippets/s_pricelist_boxed.xml
+++ b/theme_notes/views/snippets/s_pricelist_boxed.xml
@@ -5,13 +5,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc3" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc3" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Rainy/08_001','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Rainy_08_001 o_we_animated"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_notes/views/snippets/s_product_catalog.xml b/theme_notes/views/snippets/s_product_catalog.xml
index 6075efc94..fa8a07697 100644
--- a/theme_notes/views/snippets/s_product_catalog.xml
+++ b/theme_notes/views/snippets/s_product_catalog.xml
@@ -4,13 +4,15 @@
 <template id="s_product_catalog" inherit_id="website.s_product_catalog">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc3 pb160 pt160 parallax s_parallax_is_fixed s_parallax_no_overflow_hidden o_full_screen_height" remove="pb64 pt64" separator=" "/>
+        <attribute name="class" add="o_cc o_cc3 pb160 pt160 parallax s_parallax_is_fixed o_full_screen_height" remove="pb64 pt64" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"html_builder/Wavy/10","colors":{"c1":"o-color-2","c2":"o-color-2"},"flip":[]}</attribute>
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <!-- Shape & Background image -->
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
-        <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('/web/image/website.s_product_catalog_default_image');"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('/web/image/website.s_product_catalog_default_image');"/>
+        </span>
         <div class="o_we_bg_filter bg-black-50"/>
         <div class="o_we_shape o_html_builder_Wavy_10" style="background-image: url('/html_editor/shape/html_builder/Wavy/10.svg?c1=o-color-2&amp;c2=o-color-2');"/>
     </xpath>
diff --git a/theme_odoo_experts/views/snippets/s_pricelist_boxed.xml b/theme_odoo_experts/views/snippets/s_pricelist_boxed.xml
index a9e67cde1..a23260c82 100644
--- a/theme_odoo_experts/views/snippets/s_pricelist_boxed.xml
+++ b/theme_odoo_experts/views/snippets/s_pricelist_boxed.xml
@@ -5,13 +5,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc4" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc4" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Connections/20','colors':{'c5': 'o-color-3'},'flip':['y'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Connections_20" style="background-image: url('/html_editor/shape/html_builder/Connections/20.svg?c5=o-color-3&amp;flip=y'); background-position: 50% 0%"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_orchid/views/snippets/s_kickoff.xml b/theme_orchid/views/snippets/s_kickoff.xml
index 51deb800c..6be7d3259 100644
--- a/theme_orchid/views/snippets/s_kickoff.xml
+++ b/theme_orchid/views/snippets/s_kickoff.xml
@@ -15,7 +15,7 @@
     </xpath>
 
     <!-- Remove the parallax effect: the background image has been already set in the main <section> tag -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Text -->
     <xpath expr="//p" position="replace" mode="inner">
diff --git a/theme_paptic/views/customizations.xml b/theme_paptic/views/customizations.xml
index 7d9fdd183..2166d1ff8 100644
--- a/theme_paptic/views/customizations.xml
+++ b/theme_paptic/views/customizations.xml
@@ -496,7 +496,7 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Bold/01_001','colors':{'c5':'o-color-2'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
@@ -505,7 +505,7 @@
     <xpath expr="//div[hasclass('col-lg-8')]" position="attributes">
         <attribute name="class" add="o_cc4" remove="o_cc1" separator=" "/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_real_estate/views/snippets/s_pricelist_boxed.xml b/theme_real_estate/views/snippets/s_pricelist_boxed.xml
index f26b1b79d..a48a4de9c 100644
--- a/theme_real_estate/views/snippets/s_pricelist_boxed.xml
+++ b/theme_real_estate/views/snippets/s_pricelist_boxed.xml
@@ -5,7 +5,7 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Blocks/04','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
@@ -14,7 +14,7 @@
     <xpath expr="//div[hasclass('col-lg-8')]" position="attributes">
         <attribute name="class" remove="rounded" separator=" "/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
diff --git a/theme_treehouse/views/snippets/s_title.xml b/theme_treehouse/views/snippets/s_title.xml
index e6ec99e31..59e1d7209 100644
--- a/theme_treehouse/views/snippets/s_title.xml
+++ b/theme_treehouse/views/snippets/s_title.xml
@@ -8,7 +8,9 @@
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//section/*" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"></span>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"></span>
+        </span>
         <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Title -->
diff --git a/theme_yes/views/snippets/s_kickoff.xml b/theme_yes/views/snippets/s_kickoff.xml
index 8c1d8fe5f..5f6a68674 100644
--- a/theme_yes/views/snippets/s_kickoff.xml
+++ b/theme_yes/views/snippets/s_kickoff.xml
@@ -7,10 +7,10 @@
         <attribute name="data-scroll-background-ratio"/>
         <attribute name="data-oe-shape-data">{"shape":"html_builder/Connections/05",'colors':{'c5':'o-color-3'},"flip":[]}</attribute>
         <attribute name="style" add="background-image:url(/web/image/website.s_kickoff_default_image)" separator=";"/>
-        <attribute name="class" add="pt0 pb0 oe_img_bg o_bg_img_center o_full_screen_height" remove="s_parallax s_parallax_is_fixed pt232 pb88" separator=" "/>
+        <attribute name="class" add="pt0 pb0 oe_img_bg o_bg_img_center o_full_screen_height" remove="s_parallax_is_fixed pt232 pb88" separator=" "/>
     </xpath>
         <!-- Remove Parallax + shape -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
         <div class="o_we_shape o_html_builder_Connections_05" style="background-image: url('/html_editor/shape/html_builder/Connections/05.svg?c5=o-color-3');"/>
     </xpath>
diff --git a/theme_zap/views/snippets/s_banner.xml b/theme_zap/views/snippets/s_banner.xml
index f1996a374..06e22db86 100644
--- a/theme_zap/views/snippets/s_banner.xml
+++ b/theme_zap/views/snippets/s_banner.xml
@@ -8,7 +8,9 @@
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//*[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+        </span>
     </xpath>
     <!-- Row - remove grid mode -->
     <xpath expr="//div[hasclass('row')]" position="attributes">
diff --git a/theme_zap/views/snippets/s_pricelist_boxed.xml b/theme_zap/views/snippets/s_pricelist_boxed.xml
index 94c17a108..3394c1235 100644
--- a/theme_zap/views/snippets/s_pricelist_boxed.xml
+++ b/theme_zap/views/snippets/s_pricelist_boxed.xml
@@ -5,13 +5,13 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc4" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc4" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Bold/01_001','colors':{'c5':'o-color-2'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Bold_01_001" style="background-image: url('/html_editor/shape/html_builder/Bold/01_001.svg?c5=o-color-2');"/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
 
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">