<div css="header-image" style="background-image: url('/pathToImage')"></div>
.header-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding-bottom: 40%;
}
<input class="js-search" />
<a class="js-search-link" target="_blank" href="#">Search in Google</a>
var defaultHref = 'https://google.com/search?q=';
var search = document.querySelector('.js-search');
var link = document.querySelector('.js-search-link');
link.setAttribute('href', defaultHref);
search.addEventListener('input', function() {
link.setAttribute('href', defaultHref + search.value.trim().replace(/ +/, '+'));
});
.btn {
background-image: url(../img/btn.png);
background-position: 0 0;
width: 478px;
height: 152px;
display: inline-block;
position: absolute;
top: 160px;
left: 0;
font-size: 20px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.53);
text-align: center;
line-height: 150px;
}
.btn:hover {
background-position: 0 -155px;
padding-top: 2px;
}
.btn:before {
content: '';
position: absolute;
top: 50px;
right: 40px;
bottom: 50px;
left: 40px;
border: 6px solid transparent;
border-radius: 50px;
animation-duration: 1s;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
animation-name: hvr-ripple-out;
}
@keyframes hvr-ripple-out {
100% {
border-color: #ccc;
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0
}
}
.content {
margin-bottom: 400px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 400px;
z-index: -1;
}
font-size: ${rem('14px')};
<a href="http://mail.ru" class="item-link item-link_first">item</a>
<a href="http://mail.ru" class="top-menu__item-link item-link_first">item</a>
<a href="http://mail.ru" class="top-menu__item-link_first">item</a>