Div with image obscured by next div down - css

Question

I am creating a div that contains an image with text that overlays a large photo following these directions - How to position text over an image in css .
However, once I've done that the div below bleeds into this div with the image. What am I doing wrong.
HTML:
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title"><img src="img/ptmn_logo.gif" alt=""></h1>
<nav>
<ul>
<li>On Stage</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<div id="bg">
<img src="img/header.jpg" alt="">
<p>This is your theater.</p>
</div>
<div class="main wrapper clearfix">
And the CSS:
#bg {
position: relative;
top: -50%;
width: 200%;
height: 200%;
z-index: -1;
}
#bg img {
position: absolute;
display: block;
top: 0;
left: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
z-index: 0;
}
#bg p {
position: absolute;
z-index: 100
}
.main {
position: relative;
}
I appreciate the help!

Answer 1

Looks like this is all you need. I'd get rid of all of those other styles, especially any margins. You can change the top and left properties of the p element to adjust its position over the header.jpg image.
img {
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
}
<header>
<img src="img/ptmn_logo.gif" alt="" />
<nav>
<ul>
<li>On Stage</li>
<li>Support</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<img src="img/header.jpg" alt="">
<p>This is your theater.</p>