I'd like the text to sit right on top of the background image, with the message fixed in place at the bottom of the container. I've tried setting 'bottom: 0;' but it doesn't seem to work. The layout needs to be responsive, so I can't specify a fixed pixel amount for the position. Any idea what I might be missing?
.bg-img {
z-index: 4;
position: relative;
}
.bg-img img {
width: 100%;
}
.message {
position: absolute;
z-index: 5;
padding-top: 50px;
padding-bottom: 50px;
bottom: 0;
background: rgba(232,218,193,0.03);
}
<section class="full-image-desc">
<div class="container-fluid message">
<div class="row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8">
<h1>Title</h1>
<h2>Sub-Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum augue vitae magna ultricies, sit amet fermentum risus fringilla. Donec arcu eros, suscipit ut ornare id, tincidunt eget nisl. Pellentesque non massa quis nibh rutrum tempor a eget nisl. Vestibulum ut laoreet nulla, id posuere lectus. Nulla id est ligula. Mauris vitae ipsum sed metus eleifend interdum at ac tortor. Aliquam erat volutpat. Curabitur vel eleifend augue, eget consectetur purus. Sed imperdiet pulvinar urna at porta.</p>
</div>
</div>
</div>
<div class="bg-img">
<img src="img/background-image.jpg" alt=""/>
</div>
</section>