Problem with two divs and their overlapping transparent (background) PNGs

[lorem]

Hi there,

on a site ( test: http://www.splyte.de/haus-else/ ) i try to use a non-tiled transparent PNG on the top, and a small horizontal tiled transparent PNG for another DIV when the box expands. The tiled one is commented out at the moment:

#wrapper-inner {

width: 970px;

height: 1000px;

margin-top: 140px;

/* background: url(../images/background-paper-tile.png) repeat-y 0px 0px; */

}

my problem is now, that on the left & right side of the overlaying transparent PNGs the shadows will be darker, than underneath the top, non tiled background … know what i mean :) ?
Ideally i would like to give the DIV with the tiled background a padding to the top, so that the tiling only starts right below where the other background ends. Is there a way to do this, or how could i approach this problem with a different markup structure?

*basically the tiling should start (or look like), where the other background with the rugged edges ends*

cheers & thanks, jan

[lorem]

screenshot of what i’m trying to accomplish: http://bit.ly/f2Y4sH

[renancoelho]

Hi,
Let me see if I get what you mean.
inside the div with the content, there is a bg image that looks like paper. then, once this background stops you want another one to tile, right?
Have you tried nested divs?
div id=’outerdiv’
div id=’innerdiv’
content
div
div
Then, apply the big bg image to #innerdiv, and the tile bg to #outer div?
Hope it helps!

[lorem]

Hi renancoelho,

thanks!

well, yes, you are right …tried that. the problem is, that the left & right side of the background images got transparent shadows and the tiled bg will always either lay on top or underneath the other DIV. This would work with a tiled background DIV that is narrower than the narrowest part of the above non-tiled background and has no transparent shaddow edges :)

guess the only solution will be a completely vertical tiled background

cheers, jan

[lorem]

arghhh :)

made a testsite with a completely vertical tiled background image: http://bit.ly/dXxhjw

the tiles are currently 300px high and got a 1px border bottom in order to distinguish them. There’s a DIV on top and on the bottom to embrace the tiled background
…the problem is now, that since the height varies, it will nearly be impossible to connect the bottom DIV with the tile seamlessly!? is there a trick i oversee? (remind you the rugged edges & transparent shadows)

thanks, jan

[lorem]

Heureka!

-> http://bit.ly/hm0ovT

you see, there’s a 300px high background-image at the top, then the tiling starts underneath. those PNGs still need some fine tuning, but the concept is working. had to wrap the content in a DIV, then pull it up with a negative margin :)
I’m all for clean & semantic markup, but an extra DIV here & there won’t hurt

thanks, j

[Author]

Posts