Javascript изображений покрывают всю страницу

Question

Ниже приведен код, который является функцией для изменения фонового изображения каждую 10-ю секунду:

$(function() {
var body = $(".home");
var backgrounds = [
    "url(img/Agure.jpg)",
    "url(img/Arsenal1.jpg)",
    "url(img/ManUtd.jpg)",
    "url(img/stadion.jpg)",
];
var current = 0;

function nextBackground() {
    body.css(
        "background",
        backgrounds[current = ++current % backgrounds.length]);
    setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background", backgrounds[0]);

Код работает, но я хочу, чтобы изображения всегда занимали всю страницу. Некоторые изображения имеют небольшой размер, чтобы покрыть всю страницу, поэтому они просто складываются рядом друг с другом. Любые предложения, как я могу изменить код?

HTML и CSS:

<section class="home">
    <div class="centered">
        <div class="h-100 row align-items-center">
        </div>
    </div>
</section>

.home {
    width: 100%;
    height: 100vh;
    background-position: center top;
    background-size: cover;
}

Answer 1

Проблема здесь заключается в сочетании двух вещей:

• Вы не используете background-repeat: no-repeat, что означает, что изображения будут мозаичными, чтобы покрыть фон (Это видно только тогда, когда изображение меньше чем контейнер, что может сбивать с толку)
• И вы устанавливаете background в JS, а не background-image, что перезаписывает ваши дополнительные CSS свойства.

Вот модифицированная версия:

$(function() {
  var body = $(".home");
  var backgrounds = [
    "url(https://picsum.photos/200/300)",
    "url(https://picsum.photos/100/300)",
    "url(https://picsum.photos/300/300)",
    "url(https://picsum.photos/250/300)",
  ];
  var current = 0;

  function nextBackground() {
    body.css(
      "background-image",
      backgrounds[current = ++current % backgrounds.length]
    );
    setTimeout(nextBackground, 10000);
  }
  setTimeout(nextBackground, 10000);
  body.css("background-image", backgrounds[0]);
})

.home {
  width: 100%;
  height: 100vh;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home">
  <div class="centered">
    <div class="h-100 row align-items-center">
    </div>
  </div>
</section>

Answer 2

Когда изображение маленькое, браузер автоматически добавляет несколько изображений (сложенных в вашем случае)

Попробуйте добавить следующее в css, чтобы избежать этого

background-repeat: no-repeat;

Также вместо запись

body.css("background", backgrounds[0]);

запись

body.css("background-image", backgrounds[0]);