How do you size a background image perfectly?

Design help General
1

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)

2

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).

4

desktop

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

image
image1886×683 204 KB

mobile

A

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

B

Or use contain

image
image1249×878 157 KB

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

image
image1261×845 215 KB

image

image

5

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

6

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

7

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.