Mask Extension data-background verwenden, siehe Screenshot im Anhang

Hallole,
vielleicht kann mir ja jemand helfen? Ich möchte gerne einen Slider mit Mask bauen. Was ich nicht hinbekomme ist die Ausgabe der Bilder im Frontend. Ich mache da irgendwas falsch, siehe Screen, denke es liegt an f:uri ...., was muss ich denn da verwenden? (Siehe Screenshot im Anhang)

Vielen Dank im Voraus!

Sehe kein Screenshot im Anhang.
Ich verwende das

<div class="carousel-inner">
                <f:for each="{data_image}" as="bild" iteration="zahl">
                    <div class="carousel-item  {f:if(condition: zahl.isFirst, then: 'active', else: '')} ">
                        <f:image image="{bild}" class="img-fluid" maxWidth="1920" />
                        <f:if condition="{data.tx_ljbilderslider_ljbilderlayeron}">
                            <f:then>
                                <div class="carousel-caption {f:if(condition: '{data.tx_ljbilderslider_ljbilderlayeroverlay}', then: 'overlay', else: '')}">
                                    <f:render section="textLayer" arguments="{_all}" />
                                </div>
                            </f:then>
                        </f:if>
                    </div>
                </f:for>
            </div>

also f:image

Wenn es darum geht ein Bild als hintergrundbild zu laden dann setze ich das bil erst in eine Variable

Alos so in der Art:

<f:variable name="BgImage" value="{f:uri.image(src:data_image.0.uid, treatIdAsReference:1)}" />
<div class="intro appear-animation" style="background-image: url('{BgImage}'); " ></div>