CODEWITHSUNDEEP
htmlcss
leemes
leemes

Reputation: 45665

Combining background color and gradient in one background CSS attribute

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 parameters being specified in separate background-position and background-size attributes in order to put these two backgrounds next to each other.

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;
}
<div></div>

I expect this to look like this:

enter image description here

However, Chrome says the background property has an invalid value:

enter image description here

I fail to understand why.

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.

I do not want to incorporate the solid color into the gradient (which would be possible in this example) because of two reasons:

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...

Upvotes: 2

Views: 6334

Answers (3)

Will Eizlini
Will Eizlini

Reputation: 21

setting a background gradient will be overlayed over the background color. so if you want only 70% of the screen to be red, you'll need to include it in the gradient as you did.

the reason why your property was not rendered in your js fiddle is because you had a comma separating the different parts of the backround shorthand property. so if you did want for overlay your gradient over the background you need to remove the comma:

div {

/* other properties of the div here */

background: red linear-gradient(to right, transparent 0%, transparent 70%, rgb(0,0,0) 70%,rgb(255,255,255) 100%);

}

https://jsfiddle.net/0orbjebm/

if you wanted the gradient tinted by the overlay, just add transparency. this is nice if you just want to great to have a gradient that you can overlay with transparency (i altered the sequence just for aesthetic sense

div {

  /* other properties of the div here */

  background: red linear-gradient(to right, transparent 0%, transparent 70%, rgba(0,0,0,1) 100%);

}

https://jsfiddle.net/tootz4w8/

in that above example i added a div and added an inline style property for the background color in the div itself and you can see we get nice effects

<div>
<!-- this one will be red and fade to black -->
</div>

<div style="background-color:blue">
<!-- this one will be blue and fade to black -->
</div>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105873

linear-gradient() is like url(), an image (background-image). In the shorthand syntax, color is aside the image (background-color) <edit> 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;}
}
<div>

</div>

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 <gradient> data type, which is a special kind of <image>. 

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

</div>

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.

Upvotes: 3

BoltClock
BoltClock

Reputation: 723538

However, Chrome says the background property has an invalid value [...] I fail to understand why.

A color value can only appear in the last layer in an element with layered backgrounds, as stated in the spec. You are specifying a color in a layer other than the last, which renders your shorthand declaration invalid.

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...

There isn't. That's the only pure CSS workaround. You could instead opt for a Base64-encoded data URI representing a single red pixel, but either way, you're going to have to specify an image value if that solid color must overlap the gradient.

Upvotes: 2

Related Questions