You know, this would be a perfect job for progressive enhancement.
If you create a repeating tile AND a vignette, you would end up making a MUCH heavier D/L.
1) there would bve two HTTP request
2) You would still have to make ONE large file
3) that large file would have to support multiple layers or transparency, so its' going to have to be a PNG 24 or 32 in other words HUGE FILE
I would opt for a little math and a JPG.
1) you can use as is and fade the bottom out to a solid color ( or not, if this is the bg to your page, you could use background-position fixed, so that the content would scroll but not the image)
2) Use as is + add a repeating jpg ( making sure the vignette and tyles end at a concurrent point .. this mean MATH! and yes two http request )
3) a JPG and CSS3 radial gradient as a second element bg ( for browsers that support it). even experiment with background-size property of the second ( vignette) bg so that it adjust (or doesn't) to fluid layouts. With CSS3 you can also mix and match from my suggestions above for optimal results