title: How To Position Child DIV While Using Bootstrap Responsive Site
body: <p>I am new to Bootstrap, responsive web design, and am trying to create a page for my band but I am running into a few issues. I will try to explain as best as I can my situation and I greatly appreciate any and all help...</p>
  
  <p>I have a div that has a background image of the band and I need it centered in the screen (regardless of the size of the screen) inside of one of Bootstrap's container DIV's. On top of that image, I have another image that I want to include. I am able to get that result so far. The problem I am running into is when I try to position the child DIV inside of the parent DIV. I have tried to set the parent DIV with a <b>position: relative</b> and the child DIV with a <b>position: absolute</b>, but as I begin to resize the screen, the inside image suddenly enlargens and stretches outside of the parent DIV. Also, when using this method and trying to position the child DIV 75% from the top of the parent DIV by using <b>top: 75%;</b>, it makes the image jump out of the parent again and puts it down at the bottom of the screen.</p>
  
  <p>Here is the code that I have used so far but cannot get to work. Again, any help at all would be greatly appreciated as I am new to Bootstrap and responsive design but I would love to figure this stuff out. Thanks in advance!</p>
  
  <p><b>MY HTML:</b></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
          &lt;div class="col-md-12 bandphoto"&gt;
          &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-md-offset-3 theband-title"&gt;
              &lt;img src="images/theband.png" class="img-responsive "&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>MY CSS:</b></p>
  
  <pre><code>.bandphoto {
      position: relative;
      max-width: 2000px;
      min-height: 999px;
      background: url(images/bandphoto.png);
      background-size: 100%;
      background-repeat: no-repeat;
  }
  
  .theband-title {
      position: absolute;
      top: 75%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/isherwood/w3mgQ" rel="nofollow">http://jsfiddle.net/isherwood/w3mgQ</a></p>
  
  <p>Am I doing something wrong here? If so, please advise with and feel free to educate me as well so that I can better understand this stuff.</p>