Skip to main content
Tahera_BegumSh
Jun 16, 2025 1:27 PM UTC
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
Community Advisor
Jun 16, 2025 1:41 PM UTC

Hi @tahera_begumsh 

Try with below uri context

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

 

Arun Patidar
View in thread

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
Jun 16, 2025 1:41 PM UTC

Hi @tahera_begumsh 

Try with below uri context

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

 

Translate
Arun Patidar
    Vishal_Anand
    Vishal_Anand
    Level 6
    Jun 16, 2025 2:04 PM UTC

    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
      Terms & ConditionsAccessibility statement

      Loading footer...