css div repeating shadow
Posted on 2007-07-25
hi there; my css skills are average but this one is stumping me.
i have a page that is 959px wide. on each side is a 2px "gradient shadow" (leaving 955px "whitespace" in between). by gradient shadow, i mean it is 2px width X 300px height image and fades from dark (at the top) to light (at the bottom).
so, to recap, my page looks like this: 2px left shadow image (left) ... 955px whitespace (middle) ... 2px right shadow image (right).
my html currently looks like this:
<div id="rightShadow"><img src="images/shadow_right.jpg" height="300" width="2" alt="" /></div>
<div id="leftShadow"><img src="images/shadow_left.jpg" height="300" width="2" alt="" /></div>
ultimately, what needs to happen is the left shadow image needs to align at the top of the left side of the page and the right shadow image needs to align at the top of the right side of page ... then a 1px X 2px background shadow (called shadow_right_bkg.jpg and shadow_left_bkg.jpg respectively) image repeats underneath each of them all the way to the bottom of the page ... giving the illusion that the 300px high shadow images are extending all the way down to the bottom of the page (i.e. without these background repeater shadows, then the shadow would just stop once the page height reached 300px ... leaving 2px wide of white space underneath for the remainder of the page).
hope that's clear.
thanks, in advance, for your assistance.