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.

[Author]

Posts