How To Position Child DIV While Using Bootstrap Responsive Site - html

Question

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...
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 position: relative and the child DIV with a position: absolute, 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 top: 75%;, it makes the image jump out of the parent again and puts it down at the bottom of the screen.
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!
MY HTML:
<div class="container">
<div class="row">
<div class="col-md-12 bandphoto">
<div class="row">
<div class="col-md-6 col-md-offset-3 theband-title">
<img src="images/theband.png" class="img-responsive ">
</div>
</div>
</div>
</div>
MY CSS:
.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%;
}
http://jsfiddle.net/isherwood/w3mgQ
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.

Answer 1

I think you want to avoid using absolute positioning (because it's very difficult to keep centered), and don't try to force Bootstrap elements when they're not needed. It's not clear to me how you want to position the inner image because I have no size reference, but maybe this gets you closer:
http://jsfiddle.net/isherwood/w3mgQ/3/
.bandphoto {
position: relative;
max-width: 2000px;
min-height: 999px;
background: url(http://placehold.it/600x600/333333);
background-size: 100%;
background-repeat: no-repeat;
}
.theband-title {
margin: 0 auto 0;
}
<div class="container">
<div class="row">
<div class="col-md-12 bandphoto">
<img src="http://placehold.it/500x500" class="theband-title img-responsive" />
</div>
</div>
</div>

Answer 2

I believe what you're looking for is display:table and his friends. Here's a JSFiddle demonstrating:
http://jsfiddle.net/VcFf9/4/
I've set the container to be 100% height, and then vertically aligned the background and the content of the cell. Bootstrap's grid lends itself quite well to display:table, so try it out! :D