Question

You can see my entire HTML here. You can copy/paste it into a demo document locally and see what I’m referring to.

http://chopapp.com/#ny9fxmtv

Basically I want to style the boxes to have both a gradient AND a custom arrow on the right. It’s shown in the image above.

The problem is that the gradient I am getting is via this code:

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#ececec)) ;


This is line 21 in my code above. But because the “background” attribute is already taken up by this line, I cannot also include a “url(image.png)” tag to specify the custom down-arrow image, which is line 20 in my code.

Is there a way I can have gradient and a down-arrow image?

Thanks!

Answer 1

Check this link

background: #6cab26;
background: url(IMAGE_URL); /* fallback */
background: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background: url(IMAGE_URL),    -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background: url(IMAGE_URL),     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background: url(IMAGE_URL),      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background: url(IMAGE_URL),         linear-gradient(top, #444444, #999999); /* W3C */