I would like to append a hero image into an HTML section. But the problem is this image doesn't take the whole page as intended when it is wrapped into a section.

For exemple 

```
    <div id="home">
      <div class="text-vcenter">
        <h1>Reunion Qualité</h1>
        <h2>Meeting Manager</h2>
        <svg height="10" width="605">
            <line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
        <h3>Namur-Belgium</h3>
      </div>
    </div>

```

Will work, but

```
<div>
    <div id="home">
      <div class="text-vcenter">
        <h1>Reunion Qualité</h1>
        <h2>Meeting Manager</h2>
        <svg height="10" width="605">
            <line x1="0" y1="0" x2="611" y2="0" style="stroke:rgb(255,255,255);stroke-width:3" />
        </svg>
        <h3>Namur-Belgium</h3>
      </div>
    </div>
</div>

```

Won't. Why ? How can i fix this ?

Here is the CSS linked regarding the Hero image :

```
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Quicksand', sans-serif;
}

#home {
  background: url(../img/qualite_01.jpg) no-repeat center center fixed;
  color: #f6f8f8;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

```