html, body {
background: cover;
background: url(../images/background.jpg) no-repeat center fixed;
}* {
box-sizing: border-box;
color: #485254;
font-family: 'Roboto';
font-size: 16px;
font-weight: 400;
line-height: 24px;
}<h1>Page title h1 <small>Officiis ab dolorum, dolores enim iusto!</small></h1><div class="example1">
<img class="example1__image" src="https://starnote.ru/media/c/starnote/v3/main/2015/7/10/89a6b638b3/mobilnaja-igra-po-motivam-neuderzhimyh-vyjdet-v-2016-godu.jpg">
</div>
<hr>
<div class="example2">
<div class="example2__image" style="background-image: url(https://starnote.ru/media/c/starnote/v3/main/2015/7/10/89a6b638b3/mobilnaja-igra-po-motivam-neuderzhimyh-vyjdet-v-2016-godu.jpg)"></div>
</div>.example1 {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
}
.example1__image {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.example2 {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
}
.example2__image {
position: absolute;
background-position: 50% 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}