смотрите мое фоновое изображение: url () внутри другого div

#javascript #html #css

#javascript #HTML #css

Вопрос:

у меня есть div с фоновым изображением: url () внутри еще 2 div, но я не могу видеть изображение, и я не знаю почему, хотя могу видеть мое фоновое изображение: url (), когда я помещаю это в свой первый div. Кто-нибудь знает, как это исправить? спасибо 🙂

 * {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 0 auto;
}

body {
  width: 100%;
  height: 100vh;

  margin: 0 auto;
  padding: 0 auto;
}
.content-wrapper {
  text-align: center;
  max-width: 100%;
  width: 85%;
  margin-left: auto;
  margin-right: auto;

  background-color: beige;
}
#projects-wrapper {
  height: 100vh;
}
.inner-wrapper {
  width: auto;
  height: auto;
  top: 6px;
  right: 6px;
  left: 6px;
  bottom: 6px;
  overflow: hidden;
}

.photo {
  width: auto;
  height: auto;
  min-width: 100.1%;
  min-height: 100.1%;
}

.project.x4 {
  width: 100%;
  height: calc(0.86624 * 29vw);
  float: left;
   background-color: coral;
}  
 <body>
  <div class="content-wrapper">

    <div id="projects-wrapped">

     <article class="project x4">

        <div class="inner-wrapper">

          <div class="photo" style="background-image: url(FOTOS/CHIPS_AHOY_STYLEFRAME_FR_v02.3.jpg); background-position: center;background-size: cover;"> </div>

        </div>
      </article>

    </div>
  </div>

</body>  

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

1. Попробуйте использовать абсолютный адрес, codepen (или около того), не имеет той же структуры каталогов, что и ваш сервер, и, скорее всего, он также нигде не сохранил это изображение.

2. Высота вашего div с фоном равна 0.

Ответ №1:

Во-первых, у вас ошибка опечатки в вашем имени id #projects-wrapper . В html вы записываете это как projects-wrapped . И вы должны указать высоту своим разделам, иначе это займет 0 высоты, если содержимое внутри него не имеет высоты.