Блог

Главная - Вопросы по программированию - Не удается получить фоновое изображение для отображения на веб-странице в полноэкранном режиме после использования скрипта

Не удается получить фоновое изображение для отображения на веб-странице в полноэкранном режиме после использования скрипта

#javascript #html #css #bootstrap-4

#javascript #HTML #css #bootstrap-4

Вопрос:

Я пишу целевую страницу с использованием bootstrap 4 и пытаюсь создать фон, который меняется каждые несколько секунд и удобен для мобильных устройств. Я разобрался с кодом для изменения изображений, но теперь я не могу понять, как включить класс, реагирующий на img.

 <section id="fh5co-home" data-section="home" style="background-image: url(images/pretty-bastard-client-lounge.jpg);" data-stellar-background-ratio="0.5">
    <script>
  var images = [
        "images/pretty-bastard-dallas-print-studio.jpg",
        "images/pretty-bastard-lobby.jpg",
        "images/pretty-bastard-sound-stage.jpg",
        "images/pretty-bastard-studio-walls.jpg",
  ]
  var imageHead = document.getElementById("fh5co-home");
  var i = 0;
  setInterval(function() {
      imageHead.style.backgroundImage = "url("   images[i]   ")";
      i = i   1;
      if (i == images.length) {
        i =  0;
      }
  }, 7000);
  </script>

Вот CSS:

 #fh5co-home {
  background-color: transparent;
  background-size: cover;
  position: relative;
  width: 100%;
  color: #fff;
}
@media screen and (max-width: 480px) {
  #fh5co-home {
    background-position: center center;
    background-attachment: initial;
  }
}

Комментарии:

1. вы пробовали min-height:100vh ?

2. Кроме того, вы можете рассмотреть возможность изменения компонента «карусель». Я считаю, что у bootstrap есть один.

3. пример: jsfiddle.net/jdell64/nfyj5gb9/3 вам все равно придется изменить размер страницы в формате bg, но это проблема, на которую несколько раз отвечали на этом сайте.

4. минимальная высота: 100vh исправлена проблема! спасибо @ShubhamVerma

Ответ №1:

Высота отсутствует, и вы, вероятно, не ждете 7 секунд. У вас даже нет тега закрывающего раздела

 <section id="fh5co-home" data-section="home" style="background-image: url(images/pretty-bastard-client-lounge.jpg);"
    data-stellar-background-ratio="0.5"> </section>
<script>
    var images = [
        "images/pretty-bastard-dallas-print-studio.jpg",
        "images/pretty-bastard-lobby.jpg",
        "images/pretty-bastard-sound-stage.jpg",
        "images/pretty-bastard-studio-walls.jpg",
    ]
    var imageHead = document.getElementById("fh5co-home");
    imageHead.style.backgroundImage = "url(images/pretty-bastard-dallas-print-studio.jpg";
    var i = 1;
    setInterval(function () {
        imageHead.style.backgroundImage = "url("   images[i]   ")";
        i = i   1;
        if (i == images.length) {
            i = 0;
        }
    }, 7000);


</script>

CSS:

 #fh5co-home {
  /* background-color: transparent; */
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  color: #fff;
  height:1000px;
  background-image: url("images/pretty-bastard-dallas-print-studio.jpg");
}
@media screen and (max-width: 480px) {
  #fh5co-home {
    background-position: center center;
    background-attachment: initial;
  }
}

Комментарии:

1. спасибо за ваш ответ. это определенно было свойство height. У меня есть тег закрывающего раздела, но он находится ниже в моем коде