Image Scaling / Cropping

Design help Layout & Design
1

When I use a large photo for the background of a header section at the top of the page, is there a way to have it not crop from the top when scaling for larger screens? It keeps cutting people’s heads off.

Here are examples:

https://midway-isd.webflow.io/education-foundation

Here is my read only link - Webflow - Midway ISD

Thanks

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

2

Hi @icanCreate

You can move the image around in the background image settings. Or you’ll have to crop the image in a photo editor.

3

What do you mean by “move around?”

Here is a screenshot of the image settings.

Thanks

Screen Shot 2023-01-25 at 6.57.27 PM
Screen Shot 2023-01-25 at 6.57.27 PM478×1080 116 KB

4

Here is an example where the header image does not scale and cut off heads. How did they do that? Thanks

Admissions - Freshman | Admissions (tamu.edu)

5

You can set the point of origin on a “cover” property by clicking the three little dots and chose the top center point to make the image crop from the bottom.

You can also remove the absolute positioning as shown in you screen grab.

point-of-origin
point-of-origin1600×1122 140 KB

6

Thank you so much! This is exactly what I was looking for.