CSS. How to add small image on background?

Problem

I'm creating custom (gradient) buttons with CSS. When button is clicked on, it should appear small arrow (arrow.gif). It worked before when I used background-color: property. Now I use:

a.nav_selected:link, a.nav_selected:visited {
    display:block;
    float:left; 
    padding:0px; 
    margin:0;
    width: auto;
    margin:0px 14px 0px 14px;
    text-align:center;
    text-decoration:none; 
    color: black; 
    margin:0px 0px 0px 0px;
    padding:0px 14px 0px 14px;
    background:url(images/arrow.gif) no-repeat top center;
    background-image: -o-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    background-image: -moz-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    background-image: -webkit-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    background-image: -ms-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
    opacity: 0.85;  
}

If I use background:url(images/arrow.gif) no-repeat top center; in the bottom of code (after background-image:...) then arrow appears, but here is no gradient background. How to make that appeared and arrow and background? Thank you.

UPDATE

Now my code looks like:

a.nav_selected:link, a.nav_selected:visited {
display:block;
float:left; 
padding:0px; 
margin:0;
width: auto;
margin:0px 14px 0px 14px;
text-align:center;
text-decoration:none; 
color: black; 
margin:0px 0px 0px 0px;
padding:0px 14px 0px 14px;
background-image: -o-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
background-image: -moz-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
background-image: -webkit-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
background-image: -ms-linear-gradient(bottom, #FCBA2A 0%, #FFE3A3 100%);
opacity: 0.85;  
position: relative;
}
a.nav_selected:link:after,
a.nav_selected:visited:after {
    position: absolute;
    right: 2px;
    top: 7px;
    content: '';
    display: block;
    background:url(images/arrow.gif) no-repeat top center;
}

But I got the same problem, only gradient background appears, here is no animated arrow.

Problem courtesy of: user1816133

Solution

The browser treats the background gradients as a background image. When you add your first definition of background, you're overwriting the subsequent background-image properties, since it's more specific.

If you're just looking to add a drop-down indicator to the link, you might want to look at using the :after pseudo-element.

Add the following CSS rule to your a.nav_selected:link and a.nav_selected:visited CSS:

position: relative;

And then add a new rule as follows:

a.nav_selected:link:after,
a.nav_selected:visited:after {
    position: absolute;
    right: 2px;
    top: 7px;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    background:url(images/arrow.gif) no-repeat top center;
}

Here's a jsFiddle Demo

Solution courtesy of: BenM

Discussion

Try changing this

background:url(images/arrow.gif) no-repeat top center;

to

background-image:url(images/arrow.gif) no-repeat top center;
Discussion courtesy of: Vikas Sharma

This recipe can be found in it's original form on Stack Over Flow.