I want to be able to apply a drop shadow on a background image so I can use the CMS to dynamically add images to a scroll, but it looks like it is applied to just the div instead of the image? Here’s an example to show you what I’m talking about: http://burk.webflow.io/
Sorry I wasn’t more clear. It needs to be set to “contain” since this is a photographer and he doesn’t want any of his work to be cropped. Is that a possibility?
But it needs to be dynamic images being served into the div, which would make it so I can’t apply a drop shadow to the image element directly since it’ll be a background image, right? How would I apply the dropshadow to a dynamically-served background image?
Thanks for hangin’ in here with me aaron! I really appreciate the help.
Here are the 2 sides to my struggle:
On one hand: It seems that when I use the background image property in the div, then I’m able to use the “contain” setting and it will automatically make the image fit in the div, but the drawback is that I can’t apply a drop shadow to the image.
On the other hand: When I use the image element served by the CMS, I can apply the drop shadow to it directly, but the drawback I can’t make the image be “contained” (like the background image setting gives me).
Here’s a screencast video showing what I’m talking about specifically for super duper clarity’s sake:
Thanks again for all your help in figuring this out with me!
Arg! I spoke too soon. Now when I play around with the dimensions of the browser, it condenses/stretches the image at different sizes. Check this out: https://www.screencast.com/t/UhPWisvksa
How can I get this to work just like the “contain” setting for the background image?
Try 80 or 90VH on the height instead of 100% (play around with the figure)
I’m not at my Mac so I’m not able to try it, but I recall a similar issue and I think that was the solution.
As you can see in the video below I’m pulling images from the CMS and in a slider element, it’s just a matter of playing around a little bit but it can be achieved.
I must have missed this reply, sorry!
Did you do anything else to this to make it work? I tried to break it but it wouldn’t. I tried in both Safari and Chrome on iMac and I couldn’t get it to skew.