Фоновое изображение в <div> не отображается
background-image
в пределах video id
(#video) не отображается. Я включил pure grid
стили. Я пробовал альтернативные способы использования тегов, однако позже я также хотел бы добавить кнопку в середине изображения. Есть ли способ использовать теги div для отображения моего фонового изображения? Спасибо
HTML-код:
<div id="right_content">
<div class="pure-g">
<div class="pure-u-10-24">
<h1 id="about">About</h1>
<p class="text chinese_paragraph">
(Some text)
</p>
</div>
<div class="pure-u-14-24 section2">
<div id="video">
</div>
<button>Watch</button>
</div>
</div>
</div>
Код CSS:
#right_content {
background-color: #414141;
position: fixed;
right: 0;
top: 0;
width: 700px;
height: 100%;
box-sizing: border-box;
padding: 30px 20px;
overflow: auto;
}
.pure-g > div {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
#about {
color: white;
display: inline-block;
position: relative;
border-top: 2px solid white;
vertical-align: middle;
font-family: "Source Sans Pro","Yuanti SC",sans-serif;
margin: 0;
padding: 0;
}
p.text {
color: white;
font-family: "Source Sans Pro","Yuanti SC",sans-serif;
}
.pure-g .section2 {
padding-top: 42px;
}
#video {
background-image: url("../images/video.png");
position: relative;
width: 360px;
height: 200px;
}
2 ответа
Решение
Ваш #video
У div нет размера, его ширина и высота 0px. Установите размер для вашего div, и это решит проблему.
#video {
background-image: url("../images/video.png");
position: relative;
width: 240px;
height: 100px;
}
Вы должны быть в состоянии отобразить изображение в видео Div. Попробуйте сначала использовать цвет фона, чтобы увидеть, работает ли он, возможно, неправильная ссылка на изображение. И проверьте и убедитесь, что видео Div имеет ширину и высоту.