title: Combining background color and gradient in one background CSS attribute
body: <p>I'd like to combine a solid color and a gradient in a single <code>background</code> CSS attribute. Then, I want these two backgrounds to have separate size and position parameters being specified in separate <code>background-position</code> and <code>background-size</code> attributes in order to put these two backgrounds next to each other.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
      width: 400px; height: 200px; border: 1px solid gray;
      
      background: red, linear-gradient(to right, black, white);
      background-position: left, right;
      background-size: 70% 100%, 30% 100%;
      background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect this to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ZWCDp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZWCDp.png" alt="enter image description here"></a></p>
  
  <p>However, Chrome says the background property has an invalid value:</p>
  
  <p><a href="https://i.stack.imgur.com/WGrvB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WGrvB.png" alt="enter image description here"></a></p>
  
  <p>I fail to understand why.</p>
  
  <p>I tried to find similar answers on Stack Overflow / google but most are about combining a color with an image, which seems to be a different thing since it is treated as a "single background". In my case, I want to have color and gradient to be "two backgrounds" with separate sizes / positions.</p>
  
  <p><strong>I do not want to incorporate the solid color into the gradient</strong> (which would be possible in this example) because of two reasons:</p>
  
  <ul>
  <li>In the end, the gradient should be rotated, but the border between the two backgrounds to stay vertical.</li>
  <li>The position / size should be animated in a transition (the 70%/30% ratio should be changed when hovering), which cannot be done with single gradient stops.</li>
  </ul>
  
  <p>My current work-around, which I cannot believe to be really necessary here, is to wrap the solid color in a gradient with the same start and end color. Kind of ugly, and I am sure there is a simpler way...</p>