CSS Background проблема

Почему при добавлении к background no-repeat, весь фон белеет теряется масштабирование и прочее, мне нужно чтобы он был ниже на один слайд, дальше идут particles-js. PS на кейфреймы не обращайте внимание, просто тестировал

*{
margin: 0;
padding: 0;
}

.zpluxury{
position: absolute;
top: 100%;
left: 89%;
z-index: 999;
text-align: left;
color: #fefefe;
}

.text{
position: absolute;
top: 120%;
z-index: 999;
text-align: center;
}

headart{
position: absolute;
width: 40%;
bottom: 0;
left: 65.5vh;
top: 1300px;
right: 0;
opacity: 0.7;
}

.full-screen_video{
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 object-fit: cover;
 }

 body {
 color: #fefefe;
 font-family: 'Ubuntu';
 text-transform: uppercase;
 letter-spacing: 0.2em;
 font-size: 1.3em;
 line-height: 2;
 font-weight: 300;
 text-rendering: optimizeLegibility;
 text-align: center;
 background:url(https://cutewallpaper.org/21/black-gif-background/Black-gif-background- 
 3-GIF-Images-Download.gif);
 object-fit: cover;
 z-index: 2;
 }

.container {
 position: absolute;
 top: 55%;
 left: 50%;
 width: 100%;
 transform: translate(-50%, -50%);
 z-index: 2;
 }

.txt {
 display:block;
 }

 @import url(https://fonts.googleapis.com/css?family=Ubuntu:300);

 @keyframes zpluxury {
 0% {
      background-position: 0% 50%;
 }
 50% {
      background-position: 100% 50%;
 }
 100% {
      background-position: 0% 50%;
 }
 }

 #particles-js{
 position: absolute;
 height: 100vh;
 width: 100%;
 top: 250%;
 object-fit: cover;
 z-index: 999999;
 }