Adding a background image for component using sightly

[Tahera_BegumSh]

Hi, 

I would like to add a background image to my component. I've tried these two - they don't work. Please help with the correct syntax.

            <p> Background Color : ${heroProps.iconImage.imagePath}</p>

            <p style="backgroundImage:${heroProps.iconImage.imagePath@ context='styleToken'};"> Text : ${heroProps.iconImage.imagePath}

            </p>

 <div class="fnd-hero-eyebrow-title" data-sly-test="${heroProps.title != ''}"

             style="background-image:url(${heroProps.iconImage.imagePath@ context='styleToken'});">

            ${heroProps.title @ context='html'}

        </div>

[arunpatidar · Accepted solution]

Hi @Tahera_BegumSh 

Try with below uri context

style="background-image: url(${heroProps.iconImage.imagePath @ context='uri'});">

[Vishal_Anand]

Hi @Tahera_BegumSh ,

Whenever we have to render URL string in HTL, you have to ensure to provide content as uri. This will ensure url string renders properly on generated HTML without any issues.

<div style="background-image: url(${filepath @ context='uri'});">