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

Adding a background image for component using sightly

  • June 16, 2025
  • 2 replies
  • 494 views

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.
Best answer by arunpatidar

Hi @tahera_begumsh 

Try with below uri context

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

 

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
June 16, 2025

Hi @tahera_begumsh 

Try with below uri context

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

 

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

     

      Terms & ConditionsAccessibility statement

      Loading footer...