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

Adding a background image for component using sightly

  • June 16, 2025
  • 2 replies
  • 490 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>
Best answer by arunpatidar

Hi @tahera_begumsh 

Try with below uri context

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

 

2 replies

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

 

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

      Loading footer...