Overlay image on the bottom of a responsive image slider - html

Question

I'm trying to add an image to the bottom of a responsive slider and need help sticking it to the bottom.
When in full screen mode it works fine, but as I shrink the page it keeps floating up, higher and higher.
I know I can set media queries to fix the issue on certain breakpoints, but I'm looking for a more adaptive solution that will work without having to use media queries.
Here is an image of what the slider looks like at full width. (This is fine.)
Then as I start to scale the screen you can notice the grass image moving up.
This is my problem. I need that grass to stay glued to the bottom of the slider.
I don't want to post all the slider code so I made a simple version on JSFiddle.
Here is the code.
HTML:
<div class="pic" align="center"><img src="http://i.imgur.com/8uVGUkM.jpg" class="slider"/></div>
<div class="grassframe"><img src="http://i.imgur.com/vw8soIm.png" class="img-max"/></div>
CSS:
.slider{width:100%; max-width:960px; height:auto; position:relative; z-index:1;}
.grassframe {
position:relative;
max-width:1200px;
margin:-135px auto;
z-index:2;
}
.img-max { width:100%; height:auto; }
I created a JSFiddle if someone wouldn't mind taking a look.

Answer 1

You can use absolute position and margin-top with % value. DEMO
Vertical padding or margin using % value use the parent's width as reference. So once tuned it will worke with any width.
.slider {
width:100%;
max-width:960px;
height:auto;
position:relative;
z-index:1;
border:solid;
}
.grassframe {
position:absolute;
margin-top:-12.5%;
max-width:1200px;
left:0;
right:0;
z-index:2;
}
.img-max {
width:100%;
height:auto;
}
If you use a wrapper in relative position and set to same max-width, it even works better (grass in absolute or relative position doesn't matter much here as long as z-index is avalaible ): DEMO
.slider {
width:100%;
max-width:960px;
height:auto;
position:relative;
z-index:1;
border:solid;
}
.grassframe {
position:relative;
margin-top:-12%;
max-width:1200px;
left:0;
right:0;
z-index:2;
}
.img-max {
width:100%;
height:auto;
}
.container {
position:relative;
margin:auto;
max-width:1200px;
}

Answer 2

Try out the below code:
HTML
<div class="pic" align="center">
<img src="http://i.imgur.com/8uVGUkM.jpg" class="slider" />
<div class="grassframe"></div>
</div>
CSS
.pic {
position: relative;
}
.slider {
max-width:100%;
}
.grassframe {
background: url("http://i.imgur.com/vw8soIm.png") no-repeat scroll center top / 1920px auto rgba(0, 0, 0, 0);
bottom: -87px;
height: 310px;
position: absolute;
width: 100%;
}
Have a look at the JSFiddle