Topic: positioning images over repeating bg with html/css (Page 1 of 1)

hey guys, working on a site that has a repeating angled striped background, a square content area is centered on the page and has rounded corners and a light drop shadow. i've managed to get everything aligned in the header and content areas using css positioning for the background (centered at top and then repeats) but the problem happens when i hit the bottom of the content area:



I'm having a hard time getting this to line up correctly, since the content area varies it may or may not line up with the background. i tried a transparent gif but the shadow doesn't correctly mesh with the background if i go that direction. one thought is to set a fixed height for the content area and use css to scroll within it, but even doing that the bottom edge seems to fall at different places in IE than it does in Firefox. any ideas? thanks.

chris


KAIROSinteractive | tangent oriented

You should use transparent PNGs and just sent IE to hell. Or you could use one of the many PNG fix that exists for IE. Or you could stick to GIF and add few lines of JS that will make the height of the content area snap to the closest superior multiple of the height of the diagonals.

well, transparency isnt working because the shadow creates a blurry solid color area around the image unfortunately, would PNG be any different than gif in that respect? and unfortunately, while i'd love to ditch IE entirely that's what most of our clients use

the JS idea is interesting but a little out of my coding league unforunately. good thoughts tho, thanks.

chris


KAIROSinteractive | tangent oriented

quote:

---

Fig said:

would PNG be any different than gif in that respect?

---

Yes, PNG files support true transparency - no matte required.

However, IE support just isn't there (don't know anything about the hacks Poi mentioned though).

gotcha, i'll have to look into it more. it looks like i'm going to set the cell at a fixed height and set a css scrolling property to scroll within it, not ideal but it works for this application.

chris


KAIROSinteractive | tangent oriented