View Full Version : container border shadow

09-26-2006, 04:25 PM

I'd like to insert a border shadow into a container div - onto both sides and on the bottom - and that is expandable length wise to accomodate different page lengthes.

This is the effect I'd like to recreate using CSS:

I've checked out the articles on alistapart on applying shadow borders but these seem to apply a fixed length jpeg image.

Does anyone have any solutions for achieving this with css?



09-26-2006, 07:15 PM
Background images in HTML will always repeat themselves automatically - horizontally and vertically. So you can just take the image you posted, make it one pixel high, so only the side borders will show (smaller file size) and apply it to your container div (through CSS) like so:

#container {backgorund: url(graphics/bg_main.gif) repeat-y; /* the repeat value is optional as nobody would notice that it repeats horizontally withou it */}

Of course such "fake borders" only work if the container has a fixed width which I assume in your case.
And then you make an image of the bottom border (just as high as the actual border is) and apply it to the last element in your container (e.g. the footer div), positioning it at the bottom:

#footer {background: url(graphics/border_bottom.gif) bottom left no-repeat;}

And see? This time we told it to not repeat, otherwise it would look funny (try it out).
So now the bottom border will move down as the content will grow. The side borders are repeating themselves automatically so you don't have to worry about them.

Hope that helped? Good luck.

09-27-2006, 10:24 AM
thanks for that stephan.

the critical thing is that the bottom div with the bottom shadow automatically resizes when the content increases.



09-27-2006, 12:03 PM
Hi Stephan

Should the bottom div be within the container divs - or outside it



09-27-2006, 01:13 PM
If I may chime in here: by the looks of it, the footer background image covers part of the container background; therefore, it should really be a child of the container to properly overlay it.
If the footer bg is set to align to the bottom of its div you also solved the stretching footer issue: if its height stretches beyond the bg image height, the bg image will still stick to the bottom of the footer; for the rest of it, the container bg will shine through and maintain the visual effect.