Is it possible to add responsive background image using cloudinary in React?
I have just discovered cloudinary and I am making a website where I am trying to make several sections of the page with different background images to be responsive by size as well by format for older browsers.
I have set up React SDK and with AdvancedImage I am getting responsive images.
My question is it possible to set up the AdvancedImage to be background image? Or for the background images I have to set functions for the screen width and in which browser the page is viewed to set manually the screen width and format to include into url when requesting an image from cloudinary? Or should I get the image using the AdvancedImage and place it as absolute in the container?
I was googling and checking the documentation of cloudinary with no luck.
Comments
-
Hi Tomas,
Thanks for reaching out to us! If you'd like to set an AdvancedImage as a background image, you can set its Z-index to be lower than the Z-index of the other image in question. An example can be found here: https://codesandbox.io/s/cld-react-sdk-quick-start-forked-bgbirl?file=/src/App.js
Here, the image of the mannequins can be seen "under" the image of the flowers because I've set the Z-index of the mannequin AdvancedImage to -1 and I've set the opacity of the flowers img to 0.5.
Unfortunately, I couldn't understand the rest of the question so if it's still relevant given the above information, could you please clarify your needs?
Regards,
Victor
0 -
Hi Tomas,
Also, I'd like to share that the same is possible using overlays and underlays. Here is the same example utilizing an overlay: https://codesandbox.io/s/cld-react-sdk-quick-start-forked-08oxem?file=/src/App.js
More information about underlays and overlays can be found here: https://cloudinary.com/documentation/layers#layer_transformations
Regards,
Victor
0 -
Hi @victor_cloudinary ,
My original question was if it is possible to get an URL of a responsive Advanced image and set that URL as a background image :)
Thank you!
0
