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')})">

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')})">

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

                     style:'background-image: url({f:uri.image(src:file.uid, treatIdAsReference:1, width:\'650c\', height: \'400c\')})',

Spread the love

Leave a Reply

Notify of