Preventing repeating background from appearing through offset transparent child elements?

Up vote 0 down vote favorite share g+ share fb share tw.

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! Html css html5 css3 link|improve this question asked Jan 16 at 1:21aendrew841217 97% accept rate.

1 It would be helpful, if you add some live code example, so people will be able to play with it. – Paker Jan 16 at 1:55 Good idea; will get that running. – aendrew Jan 16 at 1:56.

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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.