Add image to the bottom of a adjustable height section - html

Question

I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?

Answer 1

First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 2

Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.

Answer 3

You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}