Best way to tile a small horizontal gradient image down the left and right sides of the main wrapper.

Hi, I am trying to achieve a small gradient (or shadow) effect between the left and right sides of my main wrapper and the body background (I'm sure everyone has seen this on a site before). The gradient should start as dark orange on the edges of the main wrapper and then blend horizontally into the body background's lighter shade of orange. I already created 2 small gradient gifs (19px wide/30px height), one for the left side and one for the right side. I just don't know the best way to tile it down the sides of the main wrapper using CSS. I also wanted to ask whether this can be done "better" with CSS3 properties and if so, if it is already supported across the major browsers including IE, Firefox, Chrome, Safari, Android, iPhone/iPad.

I know I should use the background-image property, so do I need to create 2 separate divs to contain the GIFs tiled vertically down the left and right side? If so, how do I float those divs to the left edge of the main wrapper and vice versa for the right side? I'm working from a local version of my site, but here is a basic example of my current code to see how I am using the main wrapper and body so far. I'm assuming all my stuff inside the main wrapper shouldn't effect what needs to be done here.

HTML:

CSS:
body {
background-color: #D45907; /*THIS IS THE LIGHTER SHADE OF ORANGE)*/
margin: 0;
}
#mainwrapper {
width: 960px;
margin: 0 auto;
padding: 0;
text-align: left;
background-color: #ffffff; /*WHITE BACKGROUND FOR MY MAIN WRAPPER*/
overflow: hidden;
}