Hi.
I have a background image that is being cut off in the div block.
I’ve tried different things which I’ve found on this forum… custom, cover, contains, playing with the VH, but it’s not working.
The current height is set to what the height of the div block is in the Figma designs.
What I want to achieve:
What it currently looks like:
Relatively new to Webflow, so any guidance will be super helpful.
Thanks.
Hey @Liza_S,
like this?
I think your ›Div Background‹ element needs padding since the background image should appear both above and below your cards. I gave it 64px in top and bottom padding and set the height of the container to “auto”.
The problem however is the screen size itself: If you resize it to be smaller, it looks like in your initial design. Setting it to be wider, the image grows larger since it needs to cover more space and therefore will be cut off. This might be solved with added padding, but might still look quite different depending on the screen width.
Cheers
Leon
Hi Leon.
Thanks so much for the guidance. I changed the padding as you suggested and it works to about 1500px screen size but if the screen size is any bigger than that it starts cutting off the image.
I might just compromise and remove the SVG and fill the div background with a colour so there’s uniformity across screens.
Thanks again,
Liza
