Изображение / кнопка между блоками, как реализовать?

Question

[tomtaker]

Вопрос такой...
Как реализовать данную кнопку поверх блока (background) с подобным позиционированием при том что бы при изменении разрешения она не сползала?

Спасибо за ответ

.head_img {
background-image: url("../img/main_logo.jpg");
background-size:100%;
background-repeat: no-repeat;
height: 600px;
margin-top: 40px;
}

Answer 1

[Сергей Горячев]

https://jsfiddle.net/webirus/mb7ouuvn/1/

Answer 2

[Максим Тимофеев]

Наехать элементом на элемент можно двумя способами:
отрицательный margin-top
абсолютное позиционирование

Answer 3

[tomtaker]

Пока что решил только так, но работает не идеально

.head_buttom {
background-image: url("../img/button.png");
background-size:30%;
background-position: center;
background-repeat: no-repeat;
height: 200px;
margin-top: 25%
}

Comments

[Виктор Янышев]

Решение тебе уже предоставил Sergey Goryachev