Jump to content

CSS Blend Modes

Rob Bedeaux

Recommended Posts

This is a pretty neat feature you can apply to a background to tint it. 


Place the following code in your head code of a page (or cascading pages)


<style type="text/css">
.site-background {
background-blend-mode: multiply;

Now set your background in the admin control panel to have a greyscale image and then set the background color. You should then see the image have the tint of the background. You could use this to set different sections of your site to have the same background image but be tinted different colors to allow them to stand out as distinct. 


To learn more about CSS Blends check out https://css-tricks.com/basics-css-blend-modes/

Rob Bedeaux (he/him/his)
Director, Partnerships & Symphony Marketing
E rob.bedeaux@nbcuni.com


Link to comment
Share on other sites



I really love when you put coding tips like this on the forums. Its these little customizable tweaks that make the subtle difference between a regular page and a customized one.


This one doesnt seem to work though. When I put the head code in our "summer internships" page it got all funky on me in edit mode. See the screen shot below.



Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...