CSS Relative Positioning and Vertical Alignment with Bootstrap - html

Question

I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get things positioning correctly - in particular with vertical alignment, and with getting things to stay in relative position as you resize the window.
JSFiddle code:
http://jsfiddle.net/victorhooi/ZcrCc/
Full-screen JSFiddle output:
http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/
I have this mockup:
But if you look at the JSFiddle above, I can't seem to get the opening and closing branches, along with the type images in the centre to be vertically aligned within the white box - they're everywhere.
The HTML:
<section id="proposal" class="backgroundphotos">
<div class="row">
<div class="col-md-10 col-md-offset-1 panel panel-default">
<div class="row">
<div class="col-md-1 col-md-offset-2">
<img src="http://www.victorandalpha.com/images/curly_brackets_open.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_01.png" />
<img src="http://www.victorandalpha.com/images/proposal_02.png" />
<img src="http://www.victorandalpha.com/images/proposal_03.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_04.png" />
<img src="http://www.victorandalpha.com/images/proposal_05.png" />
<img src="http://www.victorandalpha.com/images/proposal_06.png" />
</div>
<div class="col-md-2">
<img src="http://www.victorandalpha.com/images/proposal_07.png" />
<img src="http://www.victorandalpha.com/images/proposal_08.png" />
<img src="http://www.victorandalpha.com/images/proposal_09.png" />
</div>
<div class="col-md-1">
<img src="http://www.victorandalpha.com/images/curly_brackets_close.png" />
</div>
</div>
</div>
</div>
</section>
with the CSS:
.backgroundphotos {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: scroll; /* Why does this not carry over? */
min-height: 800px;
}
#proposal {
background: url(../img/04.jpg) no-repeat center center fixed;
background-attachment: scroll;
}
#proposal > div.row > div > div.row > div {
position: relative;
bottom: -90px;
}
#proposal > div.row {
position: relative;
bottom: -22.500em;
}
NB: I've edited the original question to split it into separate ones for the other CSS positioning issues. The related questions are here:
CSS Positioning two elements relative to each other, and keeping there during resize
CSS Positioning for Glyphicon-based Navbar that Opens on Hover

Answer 1

Will edit my answer when I have more time to check the other issues (you might want to consider making them separate questions) but for your first issue regarding the branches you shouldn't use bottom: -90px
#proposal > div.row > div > div.row > div {
position: relative;
bottom: 0px; //changed from -90 to just 0
}
The branches were formatted perfectly but by doing this you made them shift down.
The problem then though is the picture is aligned correctly. I added bottom: -40px to the class .col-md-offset-2 but that's bootstrap stuff so you probably don't want to edit that. Maybe make your own class so you can just directly add it or encapsulate all the .col-md-offset-2 divs in a wrapper div that you can shift downward.