html - Preventing repeating background from appearing through offset transparent child elements? -
html - Preventing repeating background from appearing through offset transparent child elements? -
so, have layout have repeating transparent shadow element set background of parent container element. set atop this, , supposedly hovering on topmost border of background, supposed image frame , drop shadow.
however, because image frame continues parent element, background image continues upward. visible vertical lines above top border of frame's drop shadow. see screenshot below:
this happens regardless if utilize transparent image or css3's box-shadow property. setting negative margins doesn't work bring out of parent element, nor setting positioning relative or absolute.
normally i'd seek "fake" transparency effect setting solid image @ top border of image frame, there's repeating stucco pattern set body background, means there'd visible, unnatural-looking edge. (insert cursing re: repeating patterns here.)
any suggestions how prevent parent element's background showing through kid element, or offsetting image frame somehow?
many thanks!
i figured out.
i modifying wordpress twentyeleven theme, has #primary , #secondary divs floats atop main content div. in order create background extend way bottom of content div (i.e., past 2 floats), had overflow:
set auto
.
since don't need float (it's 1 column no sidebar now), removed both floats , removed overflow declaration had. tah-dah, totally works now.
if else finds him/herself in issue, have @ jsfiddle, used figure out. paker suggestion.
html css html5 css3
Comments
Post a Comment