Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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 @AEMLearner-1989 

 

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 @AEMLearner-1989 

 

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