When we deal with Background images, we mix it with gradients extracted from brand colors and we use Blend Modes to mix both gradient and image together producing something new. Unifying the blend mode cases will help us represent the brand effectively consistently.

Primary Gradient, Multiply

It is the main case and the most used one. we use the brand gradient (1) with a black and white photo, mixing them together by Multiply. a clear example is the home page featured background.

/* Primary Gradient */
background-image: linear-gradient(229deg, #4ED1D6 75%, #675089 0%);

 

A sample of what we get: