Page 1 of 1

shading around a box [56K Warn]

Posted: Thu Dec 28, 2006 1:44 pm
by Luke
I am working on my company's website, and I need to create a css shadow around my container. My container is fixed width, so would it make the most sense to just make the image one large image in the background? How would you go about laying this out as far as html and css?

I'm trying to achieve this in the best way...
Image

Posted: Thu Dec 28, 2006 1:58 pm
by matthijs
A simple solution would be to make a 1px high by X wide image (X is the width of the container) with the left and right shadows and repeat that down in the container. Then use a background-image for the footer div for the bottom part and bottom corners of the shadow.

Code: Select all

#container {
 background: #fff url(bg-container.gif) 0 0 repeat-y;
}
#footer {
 background: url(bg-footer.gif) 0 0 no-repeat;
}

Code: Select all

<body>
<div id="container">
.. content ..
<div id="footer">
copyright bla bla
</div>
</div>
You can do the same with a top image, placing it in a header/logo div background, if you want top rounded corners for example.

Posted: Thu Dec 28, 2006 1:59 pm
by Luke
cool... I'll give that a go. :D

Posted: Thu Dec 28, 2006 2:22 pm
by daedalus__
I did this the other day using pure css. I can't find the code right now but what I did (in a nuthshell) is have the container, wrapped it in as many div's as the shadow was wide and set the background-color for each.

I was bored.

Posted: Thu Dec 28, 2006 2:29 pm
by Luke
how did it look?

Posted: Thu Dec 28, 2006 2:44 pm
by Kieran Huggins
I'd do the background as a 1px high repeated image in photoshop, repeated. the header / footer images would be separate files. This is the nicest looking, most fool-proof way of achieving the look you want, IMO.

Posted: Thu Dec 28, 2006 2:57 pm
by nickvd
I use this technique all the time and it works great!

take a look at http://imfinancial.net/ more specifically, the background image http://imfinancial.net/images/bg.png

It's very wide due to the tiled background (diagonal stripes), but if you're on a solid background you can make it the width of the container + (shadow * 2).

I prefer to use the image on the background of the page (body {background: url(.....) no-repeat top center;}).. "top center" is used when the layout is centered, it keeps the background centered on the page no matter how wide the screen is (hence the large width of my image, it will look fine up to 1600x1200, any bigger and you will notice the pattern stops).

Posted: Thu Dec 28, 2006 3:08 pm
by daedalus__
It looked perfect once I got the colors right. It was easy to re-use, as well.