soincslully
New Member
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 \[code\]position:absolute; top:0;\[/code\] to move a layer a text above it.I don't like the idea of using \[code\]position:absolute;\[/code\]. 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:[*]I don't know how to specify the height of the div as this is avariable based on the height of the image. The width will always beof span4 (300px). Each image will only have a few words at mosttherefore not enough to take up the entire vertical space of thediv. [*]As the browser width shrinks, part of the background div getscropped off. This is because BootStrap is trying adjust forresponsiveness. 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:\[code\]<div class="span4 cell"> This is a placeholder image</div>.cell { background: url(http://www.placehold.it/300x200) no-repeat; }\[/code\]Just to be clear, here is an image of what I am trying to create:
