Unable to display background-image in div

Question

I basically made 960 layout with 3 divs to easily place child divs with images and text. For some reason I can't make the first background-image to display.

What am I doing wrong?

Website concept:

HTML

<div class="wrap">

    <div id="left">1

        <div id="logo"></div>

    </div>

    <div id="middle">2</div>

    <div id="right">3</div>

</div>

CSS

html, body { background-image:url(../bg.png);
    margin: 0;
    padding: 0;
    border: 0
}
.wrap {
    background: #e7e7e7;
    text-align: center;
    width: 840px;
    margin:auto;
    padding-left:60px;
    padding-right:60px;
}

#left, #middle, #right {

     background: #ccc;
     display: inline-block;
     margin-right: -4px;
     width:280px;
}

#logo {
    display: block;
    position: relative;
    background-image:url(../logo.png));
    width:40px;
    height:40px;
    }

Answer 1

background-image:url(../logo.png));

Should be...

background-image: url(../logo.png);

You may also want to use background-repeat: no-repeat; background-position: center center; and background-size: cover; to make proper use of the background of a div.