I am wondering how to get a shadow on the left and the right sides of my main page just like this site. If you right click on the left side and click on view background image you get this picture, and this one for the right side...

Is there a way to use an image as your border? If not, how do they achieve this of getting an image to repeat vertically in the place of a border?

Some sites will actually have both sides of the shadow being one image behind everything. You only see the shadow parts.

The RPI site is using two distinct images. The way I've usually done it is to add the image as a css background image to different page elements. The RPI site is using tables so they have the images in their own cells.

Repeating is the default for background images. You generally have to tell them not to repeat when you don't want them too. In css you can specify:

repeat
no-repeat
repeat-x
repeat-y

We use standard CSS wrappers around images, either one, four or eight divs. From this we can easily apply images to either display drop shadows or rounded boxes by just positioning different border images in the corners or edges of each wrapper. To be honest we always start designs with eight divs in and just take the CSS out at the end if we don't need it.
If the CSS is present you can just apply borders to the images by adding or removing the new border graphics for each design.
This is when CSS becomes effecient.
There are some examples in our program's templates.

The simplest way to get the drop shadow - create the background image for the page area INCLUDING the shadow on both sides. You'll wind up with a wide graphic only a few pixels high that you repeat vertically. You set this image as the bg for a "wrapper" div, which holds everything else inside it.

I use this method all the time.. it's easy and keeps you from winding up with meaningless divs that just hold shadow images.

I have been trying to find a similar solution after seeing drop shadows done.

I had been looking into CSS drop shadows, but was trying to find a hack to enable one of these examples to work in a layout capacity.

http://alistapart.com/articles/cssdropshadows
http://1976design.com/blog/archive/2003/11/14/shadows/
http://wubbleyew.com/tests/dropshadows.htm

Thanks guys, I think the div wrapper is a much better solution. Appreciate your help!

Glad we could help. I also wanted to add I agree with Ladyned that the single image is the easiest way to do this. I've sometimes tried the two image approach because of other considerations with a layout and it is workable, but going with one image is usually much easier.