CSS Blend Modes

[Rob Bedeaux]

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;
}
</style>

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/

[Bryan Hopper]

Rob,

 

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.

 

 

[Rob Bedeaux]

Hey Bryan,

 

Sorry I missed the close style tag above. I've updated it.

 

-rob