bin/Controls/WallpaperTextArrow.js

@@ -43,7 +43,7 @@ define('package/quiqqer/presentation-bricks/bin/Controls/WallpaperTextArrow', [
             this.$Arrow = this.$Brick.getElement('.wallpaperTextArrow-arrow-fa');
 
             this.$Arrow.addEvent('click', function () {
-                new Fx.Scroll(window).start(0, this.$Brick.getSize().y);
+                new Fx.Scroll(window).start(0, this.$Brick.offsetTop + this.$Brick.getSize().y);
             }.bind(this));
         }
     });

src/QUI/PresentationBricks/Controls/WallpaperText.css

 .wallpaperText {
     height: 100%;
     background-color: var(--qui-wallpaperText-bgColor, #eee);
-    background-position: var(--qui-wallpaperText-bgPos, center);
     background-size: cover;
     position: relative;
-    background-image: var(--qui-wallpaperText-bgImage, none);
+}
+
+.wallpaperText__imageWrapper {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
+
+.wallpaperText__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: var(--qui-wallpaperText-bgPos, center);
 }
 
 .wallpaperText-container {
@@ -16,6 +28,8 @@
     justify-content: var(--qui-wallpaperText-contentPos, flex-start);
     min-height: var(--qui-wallpaperText-minHeight, initial);
     color: var(--qui-wallpaperText-fontColor, inherit);
+    position: relative;
+    z-index: 1;
 }
 
 .wallpaperText-container-content{
@@ -23,12 +37,15 @@
     max-width: 100%;
 }
 
-.wallpaperText.fixed {
-    background-attachment: fixed;
+/* image fixed */
+.wallpaperText.fixed .wallpaperText__imageWrapper {
+    clip-path: inset(0);
 }
 
-@media screen and (max-width: 1024px) {
-    .wallpaperText.fixed {
-        background-attachment: initial;
-    }
-}
\ No newline at end of file
+.wallpaperText.fixed picture {
+    position: fixed;
+    top: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+}

src/QUI/PresentationBricks/Controls/WallpaperText.html

@@ -6,10 +6,12 @@
              --qui-wallpaperText-minHeight: {$this->getAttribute('minHeight')};
              --qui-wallpaperText-contentMaxWidth: {$this->getAttribute('contentMaxWidth')}px;
              --qui-wallpaperText-fontColor: {$this->getAttribute('fontColor')};
-             {if $imageBackground}
-             --qui-wallpaperText-bgImage: url('{image src=$imageBackground onlysrc='true'}');
-             {/if}
              ">
+    {if $imageBackground}
+    <div class="wallpaperText__imageWrapper">
+        {image src=$imageBackground width=4000 class="wallpaperText__image"}
+    </div>
+    {/if}
     <div class="wallpaperText-container grid-container">
         <div class="wallpaperText-container-content">
             {if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}