Looking for a way to position text at the bottom of a background image? Here's how you can do it:
<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px">
<p class="caption">Your Text Here</p>
</div>
.caption{
position: absolute;
bottom:0;
}
When trying this out, you might notice that the element gets positioned at the bottom of the page rather than at the bottom of the background image. This happens because the "bottom" property is not behaving as expected in this case.
Is there something missing? Are there alternative ways to achieve this? Avoiding a margin-top approach is necessary as it would rely on screen ratios, which may not be desired for a fluid layout.
The ultimate goal is to find a method to place an element at the bottom of its parent element - specifically positioning text at the bottom of an image styled with "background-image".