1

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.

Tomas
  • 21
  • 1
  • 5
  • Please provide enough code so others can better understand or reproduce the problem. – Community Jan 07 '23 at 08:01
  • @Tomas, the of the Cloudinary SDK wraps the html tag. Regarding the usage of an image as a background, this could be managed through the CSS (style attribute) of the section tag you are using (see [discussions here](https://stackoverflow.com/questions/50704281/how-to-add-a-background-image-to-a-section-css)). For example, you could use the delivery URL from your Media Library account as: `background-image: url('https://res.cloudinary.com/demo/image/upload/sample.jpg');` – epasos_573 Jan 09 '23 at 05:41
  • Thx for the response Espasos! The problem with adding URL in CSS is that I do not know URL until the page needs to load as I want to add image the size of the screen width which I must specify in the URL. And as far as I know I can not directly place as background image. – Tomas Jan 11 '23 at 11:28

0 Answers0