Question

I want to add a torn, old page background image to my website. It has uneven edges and the uneven edges have a drop shadow. Here is the image. Now how am I best adding this as my background image because at the moment is almost 1mg! I am trying to reduce it in photoshop but with it having transparency, there seems little I can do with this png.

I have also thought about having nested divs, so I made 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>

I then sliced up my image and used css to style it. But the page was ignoring the parent div and just overwriting it’s background image over the parent’s when I wanted it to start after the parent’s bg image, not overlay itself, it wasn’t paying attention to the parent’s div height.

Here is a screenshot of how my page looked with my body bg img of grass applied (just in case you were wondering where that came from!).

Here’s the css

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 think the best way is to do this? Bearing in mind I need to be able to have a drop shadow on the image’s actual edges not the image’s boundary box. PLus, it needs to be a lot smaller.

Answer 1

Divide this image into to separate ones.

1. Jpeg with the inside. It can be compressed pretty efficiently – experiment with compression, you can go down to 60 or even 50 with satisfying results.
2. png with just uneven parts and shadows and transparent rectangle in the middle.

Set the png one as background of outer wrapper, and jpg for the inner.

The extra HTTP request is well worth the image size you save. To go one step further – if you’re good with Photoshop you can try to make seamless tile for the inside, but it’s not gonna be easy.