Pastebin / Фоновое изображение на всю страницу

Первый вариант

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

Смотрите также: