Question

I just finished building part of my website using Twitter’s BootStrap, but am looking on ways to improve it. This module has an image of known width but unknown height (image height will vary but has fixed width) and has text on top of the image. I originally built this by having an image tag inside a div, then using position:absolute; top:0; to move a layer a text above it.

I don’t like the idea of using position:absolute;. My alternative solution is to treat the image as a background of a div that contains the text. However, by doing so, I have encountered two problems:

1. I don’t know how to specify the height of the div as this is a
   variable based on the height of the image. The width will always be
   of span4 (300px). Each image will only have a few words at most
   therefore not enough to take up the entire vertical space of the
   div.
2. As the browser width shrinks, part of the background div gets
   cropped off. This is because BootStrap is trying adjust for
   responsiveness. How would I fix this?

I am completely stumped, and I feel that this alternative solution is not possible without being able to define a definite height. Is there a better alternative?

My code:

<div class="span4 cell">
    This is a placeholder image
</div>

.cell { background: url(http://www.placehold.it/300x200) no-repeat; }

Just to be clear, here is an image of what I am trying to create:

Answer 1

Demo…………………………..

HI now used to this

.span4.cell { 
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
 }

Live demo