is responsive background images possible?
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:
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;
}
-
Itay, you mentioned that background-image support was on the Cloudinary road map. Has there been any progress made on this?
2 -
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_hints1 -
Hi Ed,
Unfortunately, there is no ETA yet.
We will update here when we will have any updates,
Thanks,
1 -
@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.
Comments
4 comments