I am trying to overlay some text on an image.
This is easy if the image location and size stays the same, but here I am allowing the image to dynamically resize based on screen size. 

<http://jsfiddle.net/xcs9L7u6/1/>

When I set the position of the text to absolute, the text box is the right size, and I can place it at the bottom of the image just fine, but that doesn't work when the image bottom keeps changing due to window size.

So..

1. how do I keep the text at bottom of the resizing image height?
2. keep the text box to the width of the resizing width of the image?

HTML :

```
<div>
    <div class="gallery-background">
        <div class="gallery-text">Setting up some text to look at boats and fill space so that things move and wrap but need more text as it didn't quite give the right feel</div>
        <img src="http://static.giantbomb.com/uploads/original/0/4530/396796-boat.jpg" class="galleryLrg" />
    </div>
</div>

```

CSS :

```
.gallery-background {
    margin: 1.5rem 1rem 1rem 1rem;
    /*needed for firefox and ie*/
    height: 100%;
}

.gallery-text {
    color: white;
    padding: .5rem;
    max-width: 100%;
    display: inline-block;
    text-align: left;
    background-color: rgba(0, 255, 0, .65);
    position: absolute;
}

.galleryLrg {
    display: inline-block;
    height: 90%;
    width: 100%;
}

```

Any thoughts would be great, 
Thank you.