CSS Layering

[nchipping]

I’ll be the first to admit that I’m not great with CSS – thus why I’ve come here for help.

Anyway, I’m trying to do a sort of ‘layer’ effect with some CSS. I have a layer that needs to go over almost everything on the site, and maybe 2 or 3 layers on top of that in different places (like the header, etc.) So, my question is, how do I do it? I’ve made a test page, but it’s not working right now. I currently have:

*	{margin:0px; padding:0px;}



body {background-color:#FFF;}



#wrapper	{background:url(images/noise.png) repeat transparent 70% 0;}

#top 		{background:url(images/top-shadow.png) repeat-x transparent; height:70px;}



.content	{margin:0px auto; width:600px; padding:40px 0px;}

and the HTML is:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut leo ligula, condimentum at blandit eu, convallis in risus. Sed tincidunt, ligula sit amet tincidunt congue, augue ante accumsan nulla, vitae posuere felis neque et turpis. Pellentesque vel diam sem. Nulla sit amet ligula quis elit aliquet tempus in at nibh. Duis quis mi diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac leo massa. Nam sodales sodales lorem a ornare. Maecenas suscipit posuere turpis eu vulputate. Donec nec augue nunc. Sed arcu massa, suscipit quis porta non, commodo sit amet quam. Quisque quis justo vitae eros ornare adipiscing. Suspendisse gravida pretium dolor, id ultrices purus molestie sed. Vivamus nunc ante, imperdiet in euismod a, volutpat at tortor. Nunc eu erat nunc. Nulla nibh risus, imperdiet ac porta vel, porttitor a eros. Curabitur libero lorem, egestas sed dictum eu, vestibulum vitae velit. Ut varius lectus vitae massa gravida bibendum faucibus nisi iaculis. Cras hendrerit aliquam augue consectetur tincidunt. Nulla feugiat posuere neque sit amet laoreet.




Phasellus aliquet varius sapien, quis commodo risus malesuada nec. Nulla vel sollicitudin justo. Maecenas tincidunt lacus id augue pulvinar in pellentesque sapien vulputate. Integer at leo vel turpis malesuada congue at a lacus. Sed est sapien, placerat a facilisis non, interdum eu tortor. Proin ut enim ut ipsum fringilla ultrices. Integer rhoncus facilisis ligula, quis fringilla sapien posuere ac. Mauris suscipit nisl ut nisi aliquam vehicula. Aliquam elit magna, posuere euismod facilisis sed, elementum a lorem. In a est justo, iaculis pretium metus. Nullam tempus ultricies ipsum eu interdum. Morbi vitae nisi turpis. Nullam quis odio vel neque malesuada volutpat. Vivamus molestie pulvinar magna, id vulputate sem luctus vel. Quisque blandit, velit et varius euismod, diam eros laoreet arcu, ut mollis risus nunc ac lectus. Etiam ullamcorper posuere luctus. 

The site test stuff is up here. Any help would be greatly appreciated. An image of what it SHOULD look like when it’s done is here. So the noise would go over almost everything, the shadow goes over the noise in the header area, and then the gray stripes would be behind the noise, but the main image would be on top of it. Hope that makes sense to somebody out there. Thanks.

[chrisburton]

Would this work? How can you create noise with transparency which you might need to overlay everything without blocking view of the content?

I did exactly this with CSS diagonal gradient but so far I don’t think it’s possible with noise.

[Josh]

Well if you want to go about this using CSS3 all you need to do is build the header with a white or transparent background.

Then for the content area apply the tan strips to it’s background (no-repeat x y).

Then for the image you can add a CSS3 Box-Shadow with RGBA coloring to get the right opacity (with a graphic fallback for IE6 and below).

That should get you started off on the right direction.

I don’t think you need to really LAYER anything. But if you still want to go with the layering I would use a combo of Position: Absolute; and Z-Index:; to get the job done.

[chrisburton]

@Josh, not sure I follow what you’re saying.

[nchipping]

Got it working – thanks guys. I just had to do the absolute positioning with the z-index, and then make sure both images were transparent, and it’s good to go.

[Author]

Posts