Background images in Div are cropped when resizing browser

Our section with row and column padding has three horisontal content divs that seem to be made correctly when browser is maximized, but when we resize the browser window the images are shown wrong, because they are resizing inside their div and therefore cut / dis-proportional in the visible area.

Hope for some help in this matter :slight_smile:

Webflow link:
https://preview.webflow.com/preview/flying-october-87b2c3ef5e1cc60ee5d1b098?preview=59ae743f0c170435e141999ebbad4f0e

Hi @jakobholst,

What is your website link?
As for your question. Use images (drag them in) instead of background images.

Best,
Karl-Heinrich

Hi @Karl-Heinrich

Here you find my website link:
https://preview.webflow.com/preview/flying-october-87b2c3ef5e1cc60ee5d1b098?preview=59ae743f0c170435e141999ebbad4f0e

Best, Jakob

Hi @jakobholst,
I meant your published link.

Did you try my solution?

Best,
Karl-Heinrich

Hi @Karl-Heinrich

Sorry - my publishing link is here:
http://flying-october-87b2c3ef5e1cc60ee5d1b098.webflow.io

The solution you suggested did partially fix my issue but still a have a hover issue:

I’m using three columns with a Link Block in each with an image and a text wrapper (for heading and paragraph). The hover will show the text wrapper - but it’s not possible for me to place it correctly in front of image.

Can you suggest a good method for making the hover put the text wrapper directly on top of image?

Thanks, Jakob

Hi @jakobholst,

Yes I can. Unfortunately, it is kind of hard to explain. The main issue is this: You can’t manipulate an image and basically have to leave its CSS settings blank (regarding the overlay).
That is a huge problem, because this means we will never know how big the image will be, but we still need to figure out a way to always have an correctly sized overlay present. So instead of me talking any longer out of my ass, I decided to build the solution for you.

With what I built, you can insert any image of ANY size and the overlay will always work. You can freely manipulate paddings, margins, all the good stuff and it will STILL work. Check it out here.

To recreate this for yourself, check my read-only.

Happy designing and let me know when your website is finished :slight_smile:

Best,
Karl-Heinrich

2 Likes

Hi @Karl-Heinrich

Thanks alot for your help and I made all the adjustment according to your build - but the overlay is not showing on hover (the green color is not appearing). It’s probably something very simple but I feel blind since I cannot currently identify what the issue is.

Maybe you can easily identify why it’s not showing when mouse is over image?

Thanks, Jakob

Hi @jakobholst,

You did good! Bu also, you don’t need to recreate it like I did the exact same way. Actually, only everything beginning with “ImageCardWrapper” and below is where the fun starts.

Easily can. Check your hover state. Ah! There is none. Very easy to overlook. Still, I hope you appreciate the time I spent trying to help you :slight_smile:

Best,
Karl-Heinrich

1 Like

wow - it works! :-))

Thanks @Karl-Heinrich I’m so happy. You are the best and a great day to you.

  • Jakob

This topic was automatically closed after 60 days. New replies are no longer allowed.