Center a 1:1 radial background

Question

I am trying to give my page a vignette looking background.

html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat:no-repeat;
    background: -webkit-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* For Firefox 3.6 to 15 */
    background: radial-gradient(rgba(249, 249, 249,1),rgba(249, 249, 249,.66),rgba(249, 249, 249,0)); /* Standard syntax (must be last) */
    background-color: #bbbbbb;
    background-attachment: fixed;
}

I am using rgba because it reduces the banding a little bit.

But basically I am getting the (exaggerated) image on the right when I want the one on the left. The red represents the visible screen.

How can I do this?

Answer 1

Turns out I simply needed one more argument, "circle", on all of the gradient calls. For instance:

-webkit-radial-gradient(circle, rgba(249, 249, 249,1),rgba(249, 249, 249,0)); /* Safari 5.1 to 6.0 */

That with the original code and this at the end:

background-position: center;

Does exactly what I was describing.