is responsive background images possible?

Mark

July 06, 2017 05:32

Could you give an example of how to return responsive background images ?

I need a direct method using url not using <img> tag. For example:

I have :

http://res.cloudinary.com/cloud_name/image/upload/w_auto/v1499313598/my_image.jpg

I want to use it something like:

#frontsec {
background-image: url(http://res.cloudinary.com/cloud_name/image/upload/w_auto/v1499313598/my_image.jpg);
height: 100vh;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}

 

I need the size of the image adjusted based on the device. Is it possible?

0

• 

  Itay Taragano

  July 16, 2017 15:42

  Currently, our Javascript library only supports 'img' tags. While it's on our road-map to support CSS's background-images, you may want to consider taking a look at our automatic responsive support, using client-hints:
  http://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_client_hints

  1
• 

  Ed Kulb

  June 12, 2018 16:00

  Itay, you mentioned that background-image support was on the Cloudinary road map. Has there been any progress made on this? 

  2
• 

  Shirly Manor

  June 13, 2018 17:12

  Hi Ed,

  Unfortunately, there is no ETA yet.

  We will update here when we will have any updates,

  Thanks,

  1
• 

  Derek Austin

  August 09, 2019 21:32

  @Shirly Manor & @Itay Taragano

  Glad to hear it!!  Your API is awesome, and I'm about to publish a demo to Medium about using React to create a photo lightbox with Cloudinary-optimized photos.  Great product, and I'll push it to my mobile app when the background CSS property hits and/or I figure out how to layer an img behind everything else.  Thanks again!

   

  

  https://codesandbox.io/s/react-pose-text-lightbox-demo-github-master-8xupp

  1

Post is closed for comments.