background and web content

[helen2263]

Hello Everyone,

I am creating a new site and would like the following. Please see image for example. I have tried but having difficulties with the upper background and lower background images. The text content part I would like a drop shadow which I can do.

This is what I would like to do.

1. main background colour grey

2. add upper image background on main background,

3. add navigation bar and text content on upper image background with drop shadow on text content part, so the upper image background would be underneath the navigation bar and text content area.

4. add bottom background image on top of text content page.

The problem I am having is to add the navigation and text content on top of the upper image background and to add the bottom image background on top of the navigation and text content area.

I hope i am not confusing anyone but any help would be great.

please see link

http://www.flickr.com/photos/14721881@N05/7138607155/sizes/o/in/photostream/

Helen

[Paulie_D]

You can add multiple box-shadows to your content section. Of course it won’t work in older browsers but then that doesn’t really matter.

Of course, it won’t be perfect: http://jsfiddle.net/Paulie_D/KuYAZ/

[Manojnaanak]

/*try this for all browser*/

.DIV{background-color:#ffffff;

width:435px;

height:352px;

border-color:#cccccc;

border-width:1px;

/* Firefox v1.0+ */
-moz-border-radius:0%;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:0%/0%;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */
border-radius:0%/0%;

border-style:solid;

/* Firefox v3.5+ */
-moz-transform: matrix(0.46,0,0,0.46,0,0);
-moz-transform-origin:center;

/* Safari v3.1+ and by Chrome v9.0+ */
-webkit-transform: matrix(0.46,0,0,0.46,0,0);
-webkit-transform-origin:center;

/* Opera v10.5+ */
-o-transform: matrix(0.46,0,0,0.46,0,0);
-o-transform-origin:center;

transform: matrix(0.46,0,0,0.46,0,0);
-transform-origin:center;

/* Firefox v3.5+ */
-moz-box-shadow:0px 5px 5px rgba(0,0,0,0.65);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:0px 5px 5px rgba(0,0,0,0.65);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+ and by Opera v10.5+ */
box-shadow:0px 5px 5px rgba(0,0,0,0.65);

filter:
progid:DXImageTransform.Microsoft.Matrix(M11 = 0.46,M21 = 0,M12 = 0,M22 = 0.46, SizingMethod = ‘auto expand’)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 5,Color = #a6000000,Positive = true);

-ms-filter:”progid:DXImageTransform.Microsoft.Matrix(M11 = 0.46,M21 = 0,M12 = 0,M22 = 0.46, SizingMethod = ‘auto expand’) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 5,Color = #a6000000,Positive = true)”;
}

[Author]

Posts