Combining background color and gradient in one background CSS attribute

Question

I\'d like to combine a solid color and a gradient in a single background CSS attribute. Then, I want these two backgrounds to have separate size and position parame

Answer 1

linear-gradient() is like url(), an image (background-image). In the shorthand syntax, color is aside the image (background-color) multiple gradient can be set and animate via background-size:

div {
  width: 400px;
  height: 200px;
  border: 1px solid gray;   
  background:linear-gradient(to top,red,red) no-repeat, linear-gradient(to right,black, white) no-repeat  100% 0 tomato; 
  background-size: 20% auto, 80% auto;
  animation: animate 4s infinite alternate;
}
@keyframes animate {
from {  background-size: 20% auto, 80% auto;}
30% {  background-size: 10% auto, 10% auto;}
90%, to {  background-size: 70% auto, 30% auto;}
}

---

Note that , red can be included into the gradient instead the use of background-color: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

The linear-gradient() CSS function creates a linear, progressive transition between two or more colors. Its result is an object of the data type, which is a special kind of .

div {
  width: 400px;
  height: 200px;
  border: 1px solid gray; 
  background: linear-gradient(to right, red 70%,black 70%, white) ;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background

The CSS background shorthand property lets you adjust all of the available background style options at once, including color image, origin and size, repeat method, and other features. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.