Streaming live at 10am (PST)

Drop shadow on background image itself, not div?


#1

Hey all!

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/

I want it to look more like this:

Is that possible? Thanks!

Share link:
https://preview.webflow.com/preview/burk?preview=7360ecb492cdb4c1c66567a71b88e617


#2

Hello @adiggy

Just change the background setting to ‘cover’:


#3

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?


#4

Then just add the shadow to an image element inside of that div.


#5

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?


#6

You can apply drop shadows to image elements served by the CMS


#7

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! :slight_smile:


#8

Set a div with the size you want. Set flex box, horizontal and centre.
Add the image element, add drop shadow and set height to 100%

The image won’t be any taller than the div container it sits in.


#9

Yes! Oh, this is brilliant! :smiley: You saved the day, markos84uk. Thank you, thank you!


#10

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:

How can I get this to work just like the “contain” setting for the background image?

Thanks again, fellas!


#11

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.

Let me know!


#12

Is this what you need?


#13

@markos84uk – I tried 80vh on the height and it’s the same problem of stretching the image. :confused:

@aaronocampo – No, I do actually need the images to be dynamically pulled from the CMS and in the slider element like I have in my mockup here (not scrollable vertically like you have in your mockup):
https://preview.webflow.com/preview/burk?preview=7360ecb492cdb4c1c66567a71b88e6172

There’s gotta be a way to do this, right? It seems like a pretty straightforward use case.


#14

Those images are pulled from the CMS :thinking:


#15

You’re read only link is not working anymore

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.


#16

Oh my bad! Here’s the share link again:
https://preview.webflow.com/preview/burk?preview=7360ecb492cdb4c1c66567a71b88e617

Yes! Your video looks like what I need in theory. Would you mind sharing that link so I can see how you did it? Thanks so much!


#17

OK, so you need to set max height 100%, other height settings left as AUTO

I tried to stretch and skew and it doesn’t. Hope that works out!


#18

Thanks so much, markos! (P.S. Nice job on your magic site! Makes me want to see one of your shows!)

That looks like it works for most cases, but it still smooshes in extreme cases, which has me wondering if it’s set correctly?

Here’s a quick video showing you guys what I’m talking about:


#19

Hey @adiggy

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.


#20

Hey @markos84uk! Welcome back, man. :slight_smile: I haven’t gotten a fix to this, unfortunately. I’m still seeing the “smooshing” behavior that I posted in the video above, unfortunately. So you tried to break this test site I made and weren’t able to? I’m on a mac laptop on Chrome.
https://preview.webflow.com/preview/burk?preview=7360ecb492cdb4c1c66567a71b88e6172