Bootstrap 3 grid column for jumbotron header - html

Question

I have a jumbotron at the top of my site, with a background image which resizes fine when I resize the browser window.
I have another background image that lays on top of the jumbotron background image. I have been setting different breakpoints for that overlaying image using position: relative; and passing the appropriate pixel amount to top, left, width and height styles.
The reason I do this, is because the overlaying image needs to decrease as the web browser size decreases, and the reason I use top and left is because I want to have the bottom of the overlaying image line up with the bottom of the jumbotron background image at that breakpoint.
I know if I set the overlaying image to use a .make-sm-column(5) and the appropriate offset, it may work, but I am having trouble lining the bottom of the overlaying image to the bottom of the jumbotron background image.
Example html:
<div id="jumbotron">
<div id="jumbotron-man"></div>
</div>
The css just sets the background-image and position to relative, and for each breakpoint it sets the top, left, height, width of the image, I do not currently use .make-sm-column or offset for the overlay. There are other overlays and text divs on the jumbotron, but I thought just asking about this will give me push in the direction and allow me to apply the same to the other elements overlaying the jumbotron.
As seen in the image, you can see how I want it lined up
I feel like I am not taking advantage of bootstrap in this situation, any guidance is appreciated, thank you.

Answer 1

There are some different ways, a common way is to set position:relative; on the parent and position:absolute; on the child, to position the child at the bottom set bottom:0; for the child.
So:
CSS:
#jumbotron {
position: relative;
}
#jumbotron-man {
position: absolute;
bottom: 0;
}
HTML:
<div id="jumbotron">
<div id="jumbotron-man"></div>
</div>