Blending modes not affecting certain images

I am having an issue where I set blending mode to Multiply to remove the white background from small logo images on my site (I’m setting the mode to the images’ parent div, although I’ve even tried setting the mode to the image itself). It looks to be working in build mode, but when I look in preview mode, or publish the site, the blending mode appears to not work.

I’ve tried other blending modes and the same thing happens. I’ve tried blending modes on other images on the page, and they work fine.

Any thoughts? Does Multiply work differently on the web than on design platforms?

Thanks!


Here is my site Read-Only: [LINK](Webflow - Topology Eyewear 2.0)
(how to share your site Read-Only link)


hi @ndunlap I have checked your live site and blending works as expected. So If this happened “only” In WF Designer preview mode we should wait. The WF team should fix this preview anyway as it is full of bugs that made this mode useless. Until then you shouldn’t use WF Designer preview mode as reliable reference.

Can you send a screenshot of it working correctly on the live site? It looks to me on the live site that it still isn’t working.

After some more trial and error, I can get it to work if I turn off the scrolling animation. But when I turn the animation back on, the blending mode doesn’t work.

1 Like

Ohh, it works on that page because it has a white background. I have a gray background on this page (Topology | About), which is where I am facing the problem.

Hi @ndunlap your read-only link pointed to this page and you did’n mention what page has problem. Next time when you creating red-only do it from page with issue. I will check out About then.

1 Like

hi @ndunlap I will recommend to upload all logos without background and if you can’t find one you can use these you have and process these with any Graphic program to erase white background.

In meantime here is a hack you can use before you will upload appropriate .png or better will be .svg. Mixing to gray it a bit harder as grey is actually no color. But what you can do for now is to apply there rules to your partner-logos-wrapper

/* this will filter white BUT has other issues as other "black" logos aren't black*/
mix-blend-mode: color-burn;

/* so use this filter to partially fix it */
filter: grayscale(); 

Hope that will help until you will upload logos without bg.

Thanks for looking into it. This seems to just be a Webflow bug that you can’t use blending modes on elements that animate. I’ll probably just make the background white to work around this. It’s hard to get some of these more obscure company logos as PNG or SVG files.

Hi @ndunlap I believe that if you look on internet you will find what you need at least in png. These logos are very pure quality but they are good enough as they are small. As I have mentioned you can find good quality logo and remove background and if you would like to make it SVG there are online services they do that.

Each company should have a Brand Identity Guideline that is a set of rules to preserve identity of company eg. NASA, Prosper Canada etc. where you can find good logo.

But of course easiest way is to change background. :face_in_clouds:

Hi @ndunlap I was able to make it work and I do not know why I wasn’t able to do it before.

  1. reset your multiply on element you have applied
  2. make grey background on your partner-logos-images !!!
  3. apply mix-blend-mode: multiply on image. !!!

and apply identical background to your partner-logos-wrapper

DONE

Ahhhhhh, yes that’s a great workaround to this Webflow issue. It’s an elegant solution. Thank you!

1 Like

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