Ah, the classic dilemma of overlaying elements on a responsive image challenge.
It may seem daunting at first, but fear not; there's a simple solution to ensure the vertical positioning of your overlaid elements adjusts along with the image size changes.
Here is one straightforward approach:
https://i.sstatic.net/kB6OT.png
HTML:
<div class="img-wrapper">
<img class="img-responsive"
src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
<div class="img-overlay">
<button class="btn btn-md btn-success">Button</button>
</div>
</div>
CSS:
.img-wrapper {
position: relative;
}
.img-responsive {
width: 100%;
height: auto;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 50%;
}
The img-overlay:before pseudo-class takes care of the vertical alignment by adjusting the position of the overlay relative to the top of the image. In this example, the button will always be centered at 50% down from the top of the image (modify the height: 50% property for desired positioning).
jsfiddle
To ensure that the button remains responsive in size based on the window width, you can define a new class specifically for the button. Let's name it btn-responsive (replacing btn-md in the provided example). Utilize @media queries to adjust the styling of the btn-responsive based on varying window widths. Here's an example:
.btn-responsive {
/* equivalent to 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
@media (max-width:760px) {
/* similar to 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
Repeat this process for other screen widths as needed.