Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

dynamic media - aem

Avatar

Level 5

Hi Team,

 

I am able to get the responsive image on my custom component by using responsive . It working for img tag.

 

https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/image-serving-api/image-se...

 

But its not working for background-image:url div class. any suggestions?

<div class="hero__image" style="background-image:url('${dynamicmedia.fileReference @ context='styleString'}')"></div>

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi @sathya_prakasha 

 

as you are referring Dynamic Media Image so please try 'uri' instead of 'styleString' in context. 

 

<div class="hero__image" style="background-image:url('${dynamicmedia.fileReference @ context='uri'}')"></div>

 

 

View solution in original post

3 Replies

Avatar

Correct answer by
Level 4

Hi @sathya_prakasha 

 

as you are referring Dynamic Media Image so please try 'uri' instead of 'styleString' in context. 

 

<div class="hero__image" style="background-image:url('${dynamicmedia.fileReference @ context='uri'}')"></div>

 

 

Avatar

Level 5

How to handle responsive image library for background-image:url

 

<div class="hero_image" style="background-image:url('${dynamic.fileReference @ context='uri'}')"></div>

 

Its working as expected for <img> tag. 

 

Avatar

Level 4
It will be handled by css, we need to provide css class in <div class=""> and that should adapt Resonsive image as needed