Typo3 fluid: Use image as background on div or a container

/ December 15, 2017/ Typo3

(Last Updated On: August 30, 2018) This is something that I have to do almost always when I am working the front end of a new website. It was kind of tricky for me to find.

We need to use the inline version of the f:uri view helper.

<div class="My_Link_As_Image" title="My Title"
    style="background-image: url({f:uri.image(src:file.uid, treatIdAsReference:1, width:'200c')})">
</div>

Of course we can use also a complete path as src if yo do not have a file object. In this example there are two variables imageHelper.uploadFolder and newsartikel.teaserbild that form a complete path to the file but I want to left Typo3 to cut it in the correct size:

<f:alias map="{pathfile: '{imageHelper.uploadFolder}{newsartikel.teaserbild}' }">
    <div class="teaserbild" title="My Title"
        style="background-image: url({f:uri.image(src:pathfile, treatIdAsReference:1, width:'200c')})">
    </div>
</f:alias>

We can also use it as a background of a f:link.typolink in this way:

<f:link.typolink
        additionalAttributes="{
                     style:'background-image: url({f:uri.image(src:file.uid, treatIdAsReference:1, width:\'650c\', height: \'400c\')})',
                    class:'home-box'}"
        parameter="{data_item.tx_mask_homeboxes_box_link}">
    
</f:link.typolink>