MOT,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: cursive;
width: 100%;
position: relative;
}
.header_image > img {
width: 100%;
}
.header_image > div {
position: absolute;
text-align: center;
vertical-align: middle;
}
.link1 {
right: 15%;
top: 100px;
background: linear-gradient(to right bottom, white, grey);
width: 200px;
height: 200px;
border-radius: 100px;
}
.header_image > div > a{
line-height: 10px;
display: inline-block;
position: relative;
top: 75px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="header_image">
<img src="https://www.zastavki.com/pictures/1920x1200/2012/Cities__034084_.jpg">
<div class="link1"><a href="#">Очень преочень ну очень длинный текст</a></div>
</div>
</body>
</html>