Как установить фоновое изображение для полного экрана?

Question

Мне удалось разместить фоновое изображение на весь экран на рабочем столе, но на мобильном устройстве оно оставляет некоторое пространство внизу.

Найти css здесь .

* {
  padding: 0;
  margin: 0
}

body {
  background-color: #000000;
}

.crossfade > figure {
  animation-name: imageAnimation;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: static;
  top: 0px;
  width: 100%;
  z-index: 0;
}

.crossfade > figure:nth-child(1) {
  background-image: url('../Pictures/IMG_5956.JPG');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 10s;
  background-image: url('../Pictures/IMG_3497.JPG');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 20s;
  background-image: url('../Pictures/IMG_2548.JPG');
}
.crossfade > figure:nth-child(4) {
  animation-delay: 30s;
  background-image: url('../Pictures/IMG_1251.JPG');
}
.crossfade > figure:nth-child(5) {
  animation-delay: 40s;
  background-image: url('../Pictures/IMG_0429.JPG');
}

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    animation-timing-function: ease-out;
    opacity: 0.3;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}


.header{
position: relative; 
z-index: 1000; 
padding-top: 70px; 
padding-bottom: 50px; 
padding-left: 50px; 
padding-right: 50px;
}

.quote{
position: relative; 
z-index: 1000; 
padding-bottom: 50px; 
padding-left: 50px; 
padding-right: 50px;
}


.icons{
position:relative;
bottom: 0;
margin: auto;
padding-bottom: 20px; 
width: 100%;
text-align: center;
}

Answer 1

для мобильных медиа.установите высоту 100% и положение фона будет фиксированным.

.crossfade > figure {
    background: url(image url) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

Answer 2

[https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page][1]

Используйте эту ссылку выше

 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

Answer 3

<style type="text/css">
   html { 
      background: url(images/bd.jpg) no-repeat center center fixed; 
      background-size: cover;
   }
</style>

Этот размер фона используется для установки фонового изображения на полный экран в Chrome.

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

Используйте это для других браузеров, таких как IE, Firefox, Opera