title: Background-image in <div> doesn't display
body: <p>The <code>background-image</code> within the <code>video id</code> (#video) isn't displaying. I've included the <code>pure grid</code>styles. I've tried alternate ways of using  tags, however later on i'd also like to add in a button in the middle of the image. Is there a way of using div tags to display my background-image? Thanks </p>
  
  <p>The HTML code:</p>
  
  <pre><code>&lt;div id="right_content"&gt;
                &lt;div class="pure-g"&gt;
                    &lt;div class="pure-u-10-24"&gt;
                        &lt;h1 id="about"&gt;About&lt;/h1&gt;
                        &lt;p class="text chinese_paragraph"&gt; 
                            (Some text)
                        &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="pure-u-14-24 section2"&gt;
                        &lt;div id="video"&gt;
                        &lt;/div&gt;
                        &lt;button&gt;Watch&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>The CSS code:</p>
  
  <pre><code>#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 &gt; 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;
  }
  </code></pre>