CODEWITHSUNDEEP
htmlcss
Vipin Singh
Vipin Singh

Reputation: 542

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.

[![When i replace the plus icon with white color plus icon then image disappears][1]][1]

Upvotes: 0

Views: 288

Answers (2)

jay
jay

Reputation: 7

It hides the first image because you used the z-index property but didn't set the position value.

z-index is not working because it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.

In your case, set position for both to absolute.

Upvotes: 0

Spencer Rohan
Spencer Rohan

Reputation: 1939

Remove

background-image: url(../images/assets/faq/faq_list_bg.png);

EDIT BASED ON NEW INFO:

li.collapsed  a:after {
background-image: url('../images/expand_new1.png');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}

http://puu.sh/pBTSS/ffc491e491.png

If you want to change the + to a - or nothing all together once expanded:

li.collapsed.expanded  a:after {
background-image: url('NEW IMAGE LINK HERE');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}

Upvotes: 1

Related Questions