I created a 960 layout using 3 divs to easily organize child divs with images and text. However, I'm having trouble getting the background image of the first div to display.
Can you help me figure out what I'm doing wrong?
This is the concept for my website:
Here's the HTML code:
<div class="wrap">
<div id="left">1
<div id="logo"></div>
</div>
<div id="middle">2</div>
<div id="right">3</div>
</div>
And here's the CSS code:
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;
}