Currently I'm working on this page (look at Figure1)
I need to make shadow on the article div and I cannot use box-shadow attribute due to browser compatibility.
So we divide the background into 3 pieces like this,
<div class="article">
<div class="background-top"></div>
<div class="background-mid"></div>
<div class="background-bot"></div>
<div class="contents">
<!-- contents -->
</div>
</div>
It was nice until we change background image to PNG from JPEG which contains light-blue background-color already.
Before we change image files I could do it with z-index property. (set middle part's height to 100% and put top/bot parts on it)
However, since I change it with PNG It seems wierd because of opacity of PNG.
Bottom line is- I need to do something like this:
But when I set middle part's height to 100% with margin-top/bottom attributes,
This is what I've got(fiddle: http://jsfiddle.net/EaBxP/) :
It should work with IE6 and I cannot just use JPEG since designer wants to do stick article with comments and shade over comments box.
Thanks in advance.
EDIT: article div's height is implicit so I cannot just set middle part's height.
Make the yellow div absolutely positioned, relative to the container. By setting both the top and bottom without specifying a height, the div will get the height of the container.
div.background-mid {
position: absolute;
top: 20px;
bottom: 20px;
left: 0px;
right: 0px;
background-color: yellow;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With