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
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Nagarajan Chandramohan
Nagarajan Chandramohan
3 years ago

Hi good day! I am trying to do background image from html code but sadly not working

background-image: url(/fileadmin/user_upload/landingPage/Maskbg.png);

how can i fix the above code

Nagarajan Chandramohan
Nagarajan Chandramohan
Reply to  Saninn Salas Diaz
3 years ago

Hi Saninn Salas Diaz, Thank you for your prompt reply. Actually i did not get any error in console. then I found that I foget to set the height for div. It is my mistake sorry. But after reading your reply I got little luck from you to fix this.… Read more »