Let me explain using a visual representation:
The background of the first div is grey and white, where white represents transparency. The border of the image slider is yellow, while my images in the slider are red. I want it to look like this:
However, currently it looks like this:
Although this is just a representation, I believe it conveys what I am trying to achieve.
Here is the code snippet:
<div class='slider'>
<div class='top_area'>
<div class='top_area_shadow'>
<div class='contact'>
</div>
</div>
</div>
<div id='slideshow'>
<div id='slidesContainer'>
<!-- <span class="control" id="leftControl"></span> -->
<div class="slide">
<img src="../images/daf.png">
</div>
<div class="slide">
<img src="../images/daf.png">
</div>
<div class="slide">
3
</div>
<!-- <span class="control" id="rightControl"></span> -->
</div>
</div>
</div>
And here is the CSS:
.top_area{
height: 80px;
}
.top_area_shadow{
height: 80px;
background: url(../images/header_shadow.png);
background-position: center;
}
.contact{
position: absolute;
background: none;
height: 32px;
margin-left: -510px;
margin-top: 32px;
width: 1020px;
left: 50%;
text-align: center;
display: inline-block;
}
...
You can download the images from this link:
https://dl.dropboxusercontent.com/u/59666091/img.zip
In summary, I am struggling to create a slider where the image appears under a transparent border image (yellow in the representation). It works without a grey background, but not with one. What could I be doing wrong?
I have tried using z-index, but that didn't solve the issue...
If anything is unclear, please let me know in the comments. Thank you )
For a full demo and to experiment further, visit dl.dropboxusercontent.com/u/59666091/csshtml.zip