Question

So, I have a layout where I have a repeating transparent shadow element set to the background of my parent container element. Set atop this, and supposedly hovering over the topmost edge of this background, is supposed to be an image with a frame and drop shadow.

However, because the image frame continues the parent element, the background image also continues upward. This is visible as the vertical lines above the top edge of the frame’s drop shadow. See screenshot below:

This happens regardless if I use a transparent image or CSS3’s box-shadow property. Setting negative margins doesn’t work to bring it out of the parent element, nor does setting positioning as relative or absolute.

Normally I’d try to "fake" the transparency effect by setting a solid image at the top edge of the image frame, but there’s a repeating stucco pattern set as the body background, which means there’d be a visible, unnatural-looking edge. (Insert cursing re: repeating patterns here.)

Any suggestions how I could prevent a parent element’s background from showing through a child element, or offsetting the image frame somehow?

Many thanks!

Answer 1

I figured it out.

I was modifying the WordPress TwentyEleven theme, which has #primary and #secondary divs as floats atop the main content div. In order to make the background extend all the way to the bottom of the content div (I.e., past the two floats), I had overflow: set to auto.

Since I don’t need to float anything (It’s one column with no sidebar now), I removed both floats and removed the overflow declaration I had. Tah-dah, totally works now.

If someone else finds him/herself in this issue, have a look at my jsFiddle, which I used to figure it out. Thanks to Paker for the suggestion.