css3 gradient and sprite at the same time

Question

Now I found this already of SO, and everyone seems to think it works great How do I combine a background-image and CSS3 gradient on the same element?

For some reason when I do it, it fails. The image works alone, and so does the gradient. What am I doing wrong?

.cSub {
  background: #00f;
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
  background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);
  border-top: 2px solid #0089b7;
}

score 2 · Accepted Answer · answered Mar 08 '13 at 05:25

2

You have background-image as the property but you put all the background value for it, just put background instead of background-image.

answered Mar 08 '13 at 05:25

Musa

96,336
17
118
137

Damn, I must be tired. Thanks mate. – Fresheyeball Mar 08 '13 at 05:41

score 0 · Answer 2 · edited Mar 08 '13 at 16:01

.cSub {    
  background: #00f;    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);   
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);    
  background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);   
  border-top: 2px solid #0089b7;    
width:200px;    
height:auto    
}

you need to mentiion width and the height to get display the background.

css3 gradient and sprite at the same time

2 Answers2