Блог

Я скачал бесплатный шаблон css / html для работы, но у меня огромная проблема… Я пытался изменить фон, но даже если я сохранил и удалил (да, я действительно стер предыдущее изображение со своего компьютера!), оно все равно не изменилось.. Я попытался определить фон непосредственно в html, но тогда он не показал ни одной фотографии в качестве фона. В чем проблема?

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

Чего я хочу:

 .main-home {
  background: url('../images/background.jpg') no-repeat;
  height: 100vh;
}  

 <section id="home" class="main-home parallax-section">
   <div class="overlay"></div>
   <div id="particles-js"></div>
</section>  

И код, который показывает мой браузер:

    .main-home {
      background: url('../images/home-bg.jpg') no-repeat;
      height: 100vh;

}
  

Я ожидаю увидеть background.jpg как фактический фон сайта, а не это… И да, я сохранил css, обновил, попробовал другие браузеры, другие стили и т. Д

Используйте свойство !important это позволяет увеличить приоритет стиля.

 .main-home {
  background: url('../images/background.jpg') no-repeat !important;
  height: 100vh;
}
  

попробуйте добавить background-size и background-position

 .main-home {
  background-image: url('../images/background.jpg');
  height: 100vh;
  width: auto;
  background-repeat: no-repeat;
  background-size: center;
  background-position: center;
}
  

возможно, у вашего идентификатора раздела, который является #home, есть другой CSS. или, пожалуйста, попробуйте использовать !важно. как показано ниже

 background: url('../images/home-bg.jpg') !important;
  

1. Посмотрите все правила css в файле css, содержащем путь к изображению ‘images/background.jpg ‘(например:). Иногда изображение может вызываться из разных правил css, например, из части медиа-запроса.

2. Откройте вкладку Chrome inspector Network и проверьте столбец инициатора в разделе «изображения / фон».запрос изображения в формате jpg. Наведите на него курсор, и он покажет код, который вызвал запрос изображения. Например, если изображение было запущено из файла JS, конкретная строка, которая вызвала действие, будет показана в разделе Инициатора.

3. Также, как и каждый раз, очищайте кэш.