I'm looking to enhance my website with a vintage, torn page background image. The edges are uneven and have a drop shadow effect. You can view the image here. However, the file size is currently almost 1MB! I've tried reducing it in Photoshop, but due to its transparency, options seem limited.
Considering using nested divs, I've created this structure:
<div id="page-top">
<div id="page-left">
<div id="page-right">
<div id="page-bottom">
<div id="page-content">
</div>
</div>
</div>
</div>
</div>
After slicing up the image and applying CSS styling, I noticed that the page was disregarding the parent div's properties. It was overlapping its background image over the parent's instead of starting below it as intended, resulting in height issues.
Just for reference, here's a screenshot showing how my page appeared with a grass background applied (in case you were curious).
Below is the CSS I used:
body{
background:url('../images/bg1.jpg') repeat-x top left;
}
#page-top{
width:100%;
background:url('../images/pagebgTOP.png') no-repeat top left;
}
#page-left{
background:url('../images/pagebgLEFT.png') no-repeat top left;
height:640px;
margin-top:20px;
}
#page-content{
width:100%;
background:url('../images/pageBG.png') repeat top left;
}
What do you suggest as the best approach? Keep in mind that I want a drop shadow on the image's actual edges, not just the boundary box, and I also need to significantly reduce the file size.