фоновое изображение, добавленное в div в CSS, не отображается в localhost

#html #css #localhost

#HTML #css #localhost

Вопрос:

Поэтому я добавил фоновое изображение в div с помощью CSS.

 .aboutUs {
  background-repeat: no-repeat;
  position: relative;
  background-image: url(public/images/team.png);
  text-align: center;
  background-size: cover;
  height: 310px;
  margin: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-top: 20px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

Но когда я открываю его в localhost, отображаются все изображения (которые находятся в HTML), но фон div не отображается.

в моей консоли оно выдает мне эту ошибку

Помощь была бы очень признательна, ребята! #happyCoding! : D

Ответ №1:

проверьте, какова структура вашего каталога

 folder
   public
    image
       team.png
   sub-folder
    style.css

background-image: url(../public/team.png);


folder
   public
    image
       ..team.png
   ..style.css
   sub-folder
    
background-image: url(public/image.png);

folder
   public
    image
       ..team.png

   sub-folder
    another-folder
       ..style.css  
background-image: url(../../public/image.png);

Ответ №2:

может быть, попробовать это?

 background-image: url(./images/team.png);

Ответ №3:

попробуйте добавить цвет фона в свой div и посмотрите, работает ли ваш стиль.

1. Я сделал, и это сработало. Я подумал, что, возможно, что-то не так с изображением, поэтому я попробовал другое изображение, но оно все равно не сработало. 🙁

2. хорошо, попробуйте скопировать изображение в ту же папку, где у вас есть ваш html-файл, и использовать внутренний стиль

3. скопируйте изображение в тот же каталог html-файла и выполните встроенный стиль, например, dis <div style=» background-image: url(team.png);»></div>

4. Я сделал это, и это сработало. Я изменил свой URL, и теперь загружается мое изображение. Спасибо за вашу помощь: D

Ответ №4:

Из ошибки ясно, что ваш относительный путь к изображению здесь неверен.

 background-image: url(public/images/team.png);

Проверьте структуру папок и соответствующим образом задайте свой URL.

1. Да, мой путь к файлу был неправильным. Большое вам спасибо: D

2. Добро пожаловать, брат. Проголосуйте и примите мой ответ, если это помогло вам (нажав на значки в левой части моего ответа и значок галочки :)), чтобы другие разработчики также могли воспользоваться этим в будущем. Спасибо

Ответ №5:

Попробуйте этот стиль.

     background: url('../../../images/animated-strawberry-image-0052.gif') center center no-repeat no-repeat;        
    position: absolute;
    width: 100%;
    height: 100%;

проверьте правильность вашего URL-адреса pic