CODEWITHSUNDEEP
css
Lia Liana
Lia Liana

Reputation: 11

background vs background-color CSS

I'm using background and background-color to style the background with a gradient.

If I write only background I can see the gradient:

background: linear-gradient(35deg, #CCFFFF,#FFCCCC);

but if I write background-color I can't see it:

background-color:linear-gradient(35deg, #CCFFFF,#FFCCCC);

What could be the problem?

Upvotes: 1

Views: 783

Answers (2)

Darkdragomaster
Darkdragomaster

Reputation: 3

Linear-gradient is handled like an image so you can write:

background:linear-gradient(35deg, #CCFFFF,#FFCCCC);

OR

background-image:linear-gradient(35deg, #CCFFFF,#FFCCCC);

Upvotes: 0

Hoch
Hoch

Reputation: 518

Because gradient kind of background isn't a color, but an image.

See the example bellow: https://jsfiddle.net/jpavnk71/4/

HTML:

<div class="color">background-color:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>
<div class="wrong">background:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>
<div class="image">background-image:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>

CSS:

div{
  height:100px;
  line-height:100px
}
.wrong{background:linear-gradient(35deg,#CCFFFF,#FFCCCC);}
.color{background-color:linear-gradient(35deg,#CCFFFF,#FFCCCC);}
.image{background-image:linear-gradient(35deg,#FFCCCC,#CCFFFF);}

Upvotes: 3

Related Questions