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
