TYPO3 Mask CE background image

Question

I'm trying to get a background image or color in a CE element in Mask extension.

This is what I get as out-put but no image and no background color? What Am I missing forgetting here? Seems all OK to me :)

 <div id="c71" class="csc-default">
<section class="test_one" style="background-image: url('fileadmin/_processed_/c/6/csm_pizza_uit_de_kleine_pizzajolly_pizzaoven_campegio_eb7fa491f7.jpg') no-repeat center center; background-size: cover;">
<div class="row wrap">
<div class="large-12 small-12 columns">content</div>
</div>
</section>
</div>
</section>

this is in my template:

<f:if condition="{data.tx_mask_achtergrond_afbeelding}">
 <f:then>
        <f:for each="{data.tx_mask_achtergrond_afbeelding}" as="file">

            <section class="<f:if condition="{data.tx_mask_class_name}">{data.tx_mask_class_name}</f:if>"

                    style="background-image: url('{f:uri.image(src: file.uid, treatIdAsReference: 1)}') no-repeat center center; {data.tx_mask_kleur_actergrond}; background-size: cover;">                 
                    <!-- if content CE than: -->
                    <div class="row wrap">
                        <div class="large-12 small-12 columns"><!-- content element here: text / button  -->content</div>

                    </div>
                    </section>
        </f:for>
 </f:then>
      <!-- if no background image than background-color and content CE-->
  <f:else>
  <section class="class-name" 
            style=background-color:"<f:if condition="{data.tx_mask_kleur_actergrond}">
                    {data.tx_mask_kleur_actergrond}
                    </f:if>
                ;">

                <!-- if content CE than: -->
                    <div class="row wrap">
                        <div class="large-12 small-12 columns"><!-- content element here: text / button  --></div>                      
                    </div>                  
                </section>
</f:else>
</f:if>

why don't you use `{f:uri.image(image:file)}` instead of complicated handling with uid? — Bernd Wilke πφ, May 22 '17 at 13:12
like this: : style="background-image: url('{f:uri.image(image:file)}') no-repeat center center; ? — mr_typo3, May 22 '17 at 13:23

score 3 · Accepted Answer · answered May 22 '17 at 13:19

<section class="test_one" 
         style="background-image: url('fileadmin/_processed_/c/6/csm_pizza_uit_de_kleine_pizzajolly_pizzaoven_campegio_eb7fa491f7.jpg') 
                                  no-repeat 
                                  center 
                                  center; 
                background-size: cover;">

do you want only set the background image or do you want to set also the formating and positioning of the background image?
You start with background-image: but set all paramters as for background:

Ah, that helped. Thanks, I did copy some things from a sample was not aware that the background an background-image made a difference. Ha, ha, learning everyday. — mr_typo3, May 22 '17 at 13:48

TYPO3 Mask CE background image

1 Answers1