General

In this demo the background picture is blended with its background image by background-blend-mode. Thus, the result is the composition of the background color and the background image.

Some of the modes will bring different result if the color is under the image or if the color is above the image.
Try this by checking 'Color on Top' checkbox and choosing 'Normal' blending mode selection. In this case the color layer is on top of the image. Since no blending is done in normal mode, you see the color covers the entire display area. In case the checkbox is unchecked, the color is under the image and you see the image.

Color Under the Image:

We define the color to be under the image by defining the color as the value of background-color property. Background color is always under any other layer.

Color Above the Image:

We define the color to be above the image by removing the background-color and defining the color as a gradient image.

JavaScript Code

There are 3 event handlers for the following events:

• Selecting blending mode in the select area: in the handler we set background-blend-mode property of the display area (.demo-block class) to the specified mode.
• Setting the color in the color input box: in the handler we set background-color property of the display are to the specified mode. The setting depends if the color is under/above (unchecked/checked) the image.
• Checking/unchecking the checkbox: in the handler we change the color layer position relative to the image.