how to load background Image progressively as received?

Question

I have a 635 KB JPG file as background and It does not get displayed until the page is loaded.

That is making my website look ugly as soon as someone hits it.

How do I make it load progressively as received?

My css is

html {
        background: url(img/1.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }