Fixed image overflow hidden

Is it possible to use a fixed image in combination with overflow hidden? When I create a fixed image I am not able to hide what is overflowing.

You should be able to if you set the parent element that is set to not have overflow to position relative.

Thanks! I tried that but still no luck.

Here is my share link if you got time to check it out: https://preview.webflow.com/preview/calendo?utm_medium=preview_link&utm_source=designer&utm_content=calendo&preview=b703694382b94dfb544854275389b125&mode=preview

And here is published site: https://calendo.webflow.io/

It is the header image that I am talking about. I actaully got it to work fine using background image in the div, but I read that background images are not responsive and will not scale down on smaller devices so that is why I am trying to get it to work using a normal image instead.

oh, is that what you wanted to do? Yeah background image is the way to go then. And they are very much responsive, where did you read they aren’t?

Thanks! I will go back to using background image then.

Maybe I use the wrong word, but I am talking about Webflow generating appropriate image depending on the resolution: https://university.webflow.com/article/responsive-images

It says in that article that background images are not supported.

Would you say using normal image is better from a page speed aspect? I would rather have a faster site than for that header image to be fixed.

Yes that is correct. But if you set your background image to 2000px wide and compress it out of photoshop to be 200kb or less and then you can run it through tinypng if you want it even smaller. Basically if you end up with an image that’s 100-200kb that looks good to you, you won’t need to load other versions.

1 Like