Help image mask

Design help General
1

Hi,

Just needed some help creating what’s instructed below:

When masking an image, is there any way for them to be cut to the perfect proportions and stay in those proportions when increasing/decreasing the window size?

29
291280×1077 234 KB

All the images below but the first one were cut on Photoshop in the 1920 x 1080 proportion. The first image, however, is masked as background image of a container. But i can’t find a way to change its size and always maintain it disregarding the size of the window.

The purpose of this is to not need Photoshop all the time when adding an image to the website.

Here is my site Read-Only: https://preview.webflow.com/preview/pierres-first-project-077a6e?utm_medium=preview_link&utm_source=dashboard&utm_content=pierres-first-project-077a6e&preview=ed59cff0d8fc442a132eb381ef811a21&mode=preview

2

You can set defined widths on the main block container that the image element sits in and then use Overflow:hidden to fix the dimensions.

3

Brandon is right.
Another solution is to set a hight to the div containing the image.
Delete the image and instead, set that image as the background to the div, now you’ll be able to position the image to your liking.

1 Like