Background image over background image

I am trying to a background image over background image but it hides the first one image . My code is as follows

<li class="collapsed">
<a>Getting Started</a>
</li>


.collapsed {
background-image: url(../images/expand_new1.png)!important;
background-repeat: no-repeat;
background-position: 141px 5px;
background-size: 35px;
-moz-background-size: 30%;
-webkit-background-size: 30%;
z-index:50;

li.collapsed  a{

opacity: 0.8;
background-image: url(../images/assets/faq/faq_list_bg.png);
display:block;
padding-left:27%;
font-family:  'Roboto';
font-size: 20px;
font-weight: 300;
color: #fff;
z-index:-1;

I want to display expand_new1.png display top of faq_list_bg.png

please help to resolve this issue.

expand_new1.png image is white and faq_list_bg.png image is blue . it totally hide the first image.