How to put a background image on a site

Question

I have this site: http://www.problemio.com which currently has a solid-colored background and the body has a width of about 1000px.

My designer gave me a background image like this: http://problemio.com/img/ui/background_image.png

I am not sure if background images are supposed to be white in the middle like that. And I am not sure how to make this image fit around my wider frame of the body of the actual website.

Any idea if it is possible to make this my background image?

Here are my currently css styles for the outer shell:

body, html 
{
    #padding: 5px;
}

body 
{
    font-family:  "Century Gothic",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1em;
    background-color: #5C5957;
}

 /* makes the background of the top bar gray */
.container 
{
    position: relative;
    background-color: white;

    overflow:hidden;
    width:1000px;
    margin: 0 auto;
}

and here are the more complete styles:

http://problemio.com/main.css

Thanks!!

Answer 1

body 
{
    font-family:  "Century Gothic",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1em;
    background:url(smiley.gif) 0 0 no-repeat;
    background-size: 100%;
}

Here background-size only support for CSS3.

Answer 2

Something of this kind:

background-image:url('url/of/your/image');