How do you size a background image perfectly?

I’ve read a few articles on this topic and tried implementing the said solutions without the result I’m looking for. Since there’s been many updates on the designer, I’m trying to figure out how to size a background image for all devices. I’ve tried “Cover” and “Contain” and other things. Any help is appreciated. Thanks Webflow Community!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

perfectly is too general.

cover vs contain ==> CSS Property Values (Not related to the changes of the designer UI).

Please add screenshot of the problem (Maybe you talk about aspect ratio.Read her).

desktop

In your case you must use cover and position top (Base on the height of the section).

mobile

A

  • hide the background
  • Add crop image (show only on mobile)
    Like this no way the text/elements overlap the image.

B

Or use contain

The best idea her is to separate the character from the BG and use multiply backgrounds:

image

image

great, thanks for your help! i’ll try it out.

Still not getting the result I’m looking for. I tried “Fixed” and “Not Fixed” too. Any other potential solutions?

Add screenshot of the problem or the result you want. I don’t see any problems if you try the answer above.

Again for more control seperate the green-bg from the face.