Welcome to WebmasterWorld Guest from 18.204.48.199

Forum Moderators: not2easy

Message Too Old, No Replies

Facing problem with Z-index

Unable to overlay a image on another image

     
10:23 pm on May 16, 2014 (gmt 0)

New User

5+ Year Member

joined:May 16, 2014
posts: 2
votes: 0


My aim is that I have a basic slider and I want to put a image on top of it. I have tried to put a image like hexagon.png with transparent background. Now problem is that I am not able to see image on top.
But in case of image if I write a background color it`s working absolutely fine.I have checked in browser that url is image is correct or not. It`s also correct.


<div id="wowslider-container1" style="margin-bottom:50px;" >
<div class="overlay"></div>
<div class="ws_images">
<ul>
<li><img src="data1/images/20140211_runway_page_slide2.jpg" alt="20140211_Runway_Page_Slide2" title="20140211_Runway_Page_Slide2" id="wows1_0"/></li>
<li><img src="data1/images/fashion_your_life_with_us.jpg" alt="fashion_your_life_with_us" title="fashion_your_life_with_us" id="wows1_1"/></li>
<li><img src="data1/images/jannatnazirnewwinterpartywearcollection2014forwomen1.jpg" alt="Jannat-Nazir-New-Winter-Party-Wear-Collection-2014-for-Women-1" title="Jannat-Nazir-New-Winter-Party-Wear-Collection-2014-for-Women-1" id="wows1_2"/></li>
<li><img src="data1/images/menahelandmehreenlatest2012collection3.jpg" alt="Menahel-and-Mehreen-Latest-2012-Collection-3" title="Menahel-and-Mehreen-Latest-2012-Collection-3" id="wows1_3"/></li>
<li><img src="data1/images/zara.jpg" alt="zara" title="zara" id="wows1_4"/></li>
<li><img src="data1/images/zara3girls.jpg" alt="zara-3-girls" title="zara-3-girls" id="wows1_5"/></li>
</ul>
</div>

This is the css of the overlay object.

#wowslider-container1 .overlay
{
background-image:url(..img/hexagon.png);
position: absolute;
min-width:100%;
min-height:100%;
left: -10px;
top:-10px;
right: -10px;
bottom: -10px;
z-index: 99;
display: block;
}

Please suggest what canbe a reason. Thanks in advance
11:46 am on May 18, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


Is this a typo or do you have the correct url in your actual code?


background-image:url(..img/hexagon.png);


it should either be:


background-image:url(img/hexagon.png);


or depending on path:

background-image:url(../img/hexagon.png);


You probably don't want to repeat that image anyway and I guess you need to position it so maybe shorthand would be better.


background:url(../img/hexagon.png) no-repeat 50% 50%;


Remove the min width and height as they are not needed because you have defined the size via the top,right,left and bottom values.

The above assumes that the parent of all this is position:relative for the stacking context.
1:27 pm on May 19, 2014 (gmt 0)

New User

5+ Year Member

joined:May 16, 2014
posts: 2
votes: 0


Thanks paul for the help. I have resolved this issue.