I am facing a challenge while creating a module with a span8 width and varying height. The div contains an image that dictates its height, with text overlaid on the image. My issue lies in preventing part of the image from getting cropped when Bootstrap resizes the div.
Moreover, I am struggling to position my text boxes correctly. I aim to have two text boxes - one at 0% vertical and the other at 50% vertical.
<div class="row">
<div class="span12 promo">
<div class="content">
<div class="row-fluid">
<div class="topText span24">
Text positioned on the top half
</div>
</div>
<div class="row-fluid">
<div class="botText span24">
Text positioned on the bottom half
</div>
</div>
</div>
</div>
</div>
.promo { height: 100%; }
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }
.promo .content .row-fluid { height: 50px; }