Is there anyway to make a background image with an angle?

Design help General
1

Here is my site Read-Only: Webflow - Markez's Sublime Site

I’m currently in the process of creating my hero section for an upcoming website. The problem i’m currently having is that I would like to use a normal rectangle image for my background but have an overlay over the image to achieve the same angled look with it. (at the moment I have an already cropped image made in that angle)

As I Plan on making a CMS collection with the same look and I would prefer to use a standard image that I can easily import without cropping it manually to the shape I want.

If that made any sense :thinking:

Would this be possible?

2

There are some great video tutorials on masking - specifically SVG masks, I think will benefit you here.

3

Hi @memetican :wave: Here is an ugly but fine works with CMS changing image method:

https://preview.webflow.com/preview/broplayground?utm_medium=preview_link&utm_source=designer&utm_content=broplayground&preview=199fd3556254ef8e33b2beec09ee2264&pageId=64d4997f4b5efe25f8509c06&workflow=preview

The idea is create an extra wide SVG mask image:

image
image1920×853 120 KB

2 Likes