Ho un container, un content e un H2.

codice:
<body>
<div id="container">

<div id="banner">SDFSDF</div>

<div id="content">
<h1>mio titolo</h1>
<h2>mio sottotitolo</h2>


slkdfjlak</p>
</div>

</div>
codice:
body
{

margin:0px;
padding:0px;
background-color:#2B2928;
text-align:center;
}

#container {
			width: 760px;
			\width: 780px;
			w\idth: 760px;
			margin: 0px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px;
		}
#content {
			padding: 0;
							background-image: url(img/sfback.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
margin-left:18px;
		}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	color: #CC0000;
	text-align: left;
	padding:2px;
background: transparent;
}
il problema che dove ho H2 vedo lo sfondo scuro della pagina, mentre vorrei che l'H2 fosse dentro lo sfondo del content.