Adding a background image for component using sightly | Community
Skip to main content
Tahera_BegumSh
New Participant
June 16, 2025
Solved

Adding a background image for component using sightly

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>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
June 16, 2025

Hi @tahera_begumsh 

Try with below uri context

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

 

Arun Patidar
View reply

2 replies

Vishal_Anand
Vishal_Anand
Level 4
June 16, 2025

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

 

Translate
    arunpatidar
    arunpatidarAccepted solution
    New Participant
    June 16, 2025

    Hi @tahera_begumsh 

    Try with below uri context

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

     

    Translate
    Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...