Адаптивное полноэкранное фоновое изображение

CSS

Так как ширина элемента, указанная с помощью 100vw больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100%, которая будет равна ширине корневого элемента html.

.fullscreen-bg {
  background: url(image.jpg);
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

или:

CSS:

div {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	height: 90vh;
}

HTML:

<div style="background-image: url(https://placeimg.com/1000/600/arch);"></div>

<div style="background-image: url(https://placeimg.com/1000/600/nature);"></div>

<div style="background-image: url(https://placeimg.com/1000/600/tech);"></div>

или:

CSS:

div {
  background: url(file.jpg) no-repeat 50% fixed / cover;
}

HTML:

<div style="background-image: url(file.jpg);"></div>
<div style="background-image: url(file.jpg);"></div>
<div style="background-image: url(file.jpg);"></div>

Фоновое изображение

Мы можем сделать это исключительно через CSS благодаря background-sizeсвойству теперь в CSS3. Мы будем использовать htmlэлемент (лучше, чем bodyон всегда, по крайней мере, как высота окна браузера). Мы устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-sizeключевое слово cover.

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Источник

или:

html {
  background: url(images/bg.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

Можно задать для body:

body {background: url('bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

Articoli correlati