Image Mask

Support
#1

Hello! I’ve been racking my brain and the internet for a couple of days trying to figure out how to create an image mask. Right now I have a column with a background image and an image element in the column that is a .png frame. BUT I want to put a background pattern to that whole section and I can’t apply it to my png frame so I am trying to figure out how to apply an image mask.

Right now I have it worked out in codepen using a mask ( but when I put it in my website I get nothing. I place an image element, then add a custom CSS to the element.

.el { mask: url(https://fueledbylaunch.com/square/frame.svg) center / contain no-repeat;}

Am I doing something wrong in my code or on the website? Thoughts?

ps I tried a clip-path but I couldn’t get a complex SVG to work. I can do a polygon, but I need curves to fit the theme.

#2

Hi Jared,

Thank you for writing in, please note that Chrome does not fully support that mask property (https://caniuse.com/?search=mask).

Please add a second line with a prefix of -webkit-, but then again the compatibility of this property to all browsers is not gurantee.

e.g.

.el {
  mask: url(https://fueledbylaunch.com/square/frame.svg) center/contain no-repeat;
 -webkit-mask: url(https://fueledbylaunch.com/square/frame.svg) center/contain no-repeat;
}

Hope it helps,
Cheers!

#3

Thanks, I always forget about adding webkit… So is there a better way to achieve this same type of result than using mask?

#4

Hello @jaredchester,

You can check out this article to learn more about how to use masks.


Hope it helps
Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.