Фоновое изображение в <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 имеет ширину и высоту.

Другие вопросы по тегам