#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 высоты, если содержимое внутри него не имеет высоты.