Div with image obscured by next div down

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><a href="#">On Stage</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></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!

http://jsfiddle.net/#&togetherjs=qh4vJ8EKCd Not sure if I've done that right. Let me know what I can do to make that better. — rotarycuff, Feb 22 '14 at 21:33

Gray Spectrum · Accepted Answer · 2014-02-26T02:54:26.937

0

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><a href="#">On Stage</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<img src="img/header.jpg" alt="">
<p>This is your theater.</p>

edited Feb 26 '14 at 02:54

answered Feb 17 '14 at 01:48

Gray Spectrum

723
2
7
21

Are you suggesting that I take all the classes out of the html? Will that cause a loss of responsiveness? Or are you suggesting that I should just simplify the CSS for those two elements? – rotarycuff Feb 22 '14 at 21:24
Well, your jsfiddle link is no longer showing anything, so I can't really reference the code to explain why. Open a new file (call it whatever you want), and then put this HTML in it. Upload it to the same root directory as the site you're currently working on, so the image paths are the same. Make sure there aren't links to any external stylesheets...and just put the CSS above into a style tag in the head so those are the only styles the HTML is referencing. Look at what you have and see if that's a closer result to what you're looking for. – Gray Spectrum Feb 26 '14 at 02:52
1

I got this working from your original response. Thanks! – rotarycuff Feb 26 '14 at 19:51

Div with image obscured by next div down

1 Answers1