Split background

Scenario

A cms element from one of my projects: the background of the media section is not full but partial.

Solution:

1. Add an additional element to fulfill the background.
2. background: linear-gradient
   • background: linear-gradient(to bottom, red 50%, white 50%);

Bonus:

• Gradient with multi-position color stops

background: linear-gradient(to right,
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

// Equal
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

• Tilt

background: linear-gradient(45deg, blue, red);

• Default

// Equal
background: linear-gradient(blue, red);
background: linear-gradient(180deg, blue, red);