Первый вариант
html {
margin: 0;
padding: 0;
background-color: #493544 !important;
background-image: url(./background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
Второй вариант, ещё интересней
<div class="background"></div>
/* * * * * * * * * * * * * * * * * * * * * * * *
* Full-page background image
*
* Using "Clear Text Over Any Background"
* https://codepen.io/chris22smith/pen/jRGPrN
*/
@keyframes onload {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.background {
background-color: transparent;
background-image: url(./background.jpg);
background-repeat: no-repeat !important;
background-position: center !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
filter: contrast(.6) brightness(.6);
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
z-index: -17;
animation: 1s ease-in-out 0s 1 onload;
-webkit-transition: 1s;
transition: 1s;
}
See the Pen Full-page background image by Captain Anonymous (@ethicist) on CodePen.
Источник: CSS-tricks