title: I am attempting to add a background image to my vue.js project
body: <p>I want to add a background image that covers the whole page. However this is how it looks now : </p>
  
  <p><a href="https://i.stack.imgur.com/hnuY8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hnuY8.png" alt="This is the image"></a></p>
  
  <p>I want it to span the whole web page. How would this be done in vue.js?</p>
  
  <p>I also want an animated toolbar so that when the page is not scrolling the toolbar is transparent and takes the look of the background image. When it scrolls the toolbar will have the current blue color</p>
  
  <p>Here is my fiddle </p>
  
  <p><a href="http://jsfiddle.net/mxx3d7ob/7/" rel="noreferrer">vue.js project</a></p>
  
  <p>THIS is the HTML</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id = "background"&gt;
  
              &lt;div class = "" id = "explain"&gt;
  
                     &lt;h1 class = "md-title"&gt;{{ message }}&lt;/h1&gt;
  
                     &lt;h3&gt; Collect, analyse  and do better with data!&lt;/h3&gt;
  
              &lt;/div&gt;
  &lt;hr&gt;
  &lt;md-layout id = "container"&gt;
  
              &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
  
      &lt;span class="md-headline"&gt;HOW does levi function ?&lt;/span&gt;
              &lt;/md-layout&gt;
  
  
  &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
    &lt;h3&gt;levi uses research and experimentation to provide
    'actionable knowledge' that you can use to &lt;b&gt;do well &lt;/b&gt;in your environment. &lt;/h3&gt;
  &lt;/md-layout&gt;
  
                    &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"&gt;
                      &lt;h4&gt;  Identify and Collect what is needed&lt;/h4&gt;
                    &lt;/md-layout&gt;
                    &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"&gt;
                        &lt;h4&gt; Organize and analyse the evidence&lt;/h4&gt;
                    &lt;/md-layout&gt;
                    &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"&gt;
                        &lt;h4&gt;Communicate and act on the evidence! &lt;/h4&gt;
                    &lt;/md-layout&gt;
  
  
  &lt;/md-layout&gt;
  
  
  
  &lt;md-layout id = "Identity"&gt;
  
        &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
        &lt;span class="md-headline"&gt; HOW do we exist?&lt;/span&gt;
        &lt;/md-layout&gt;
  
        &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
            Our team realized that many institutions are unable to deconstruct their environment and respond to its need because; they do not have the
  cost effective products, proper processes , and the necessary execution techniques required to do so.
  &lt;p&gt;levi has been built to provide the platform and process necessary to help those in need &lt;b&gt;do well.&lt;/b&gt;&lt;/p&gt;
        &lt;/md-layout&gt;
  
  
  
             &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
                &lt;span class="md-headline"&gt;WHAT do we do?&lt;/span&gt;
            &lt;/md-layout&gt;
  
            &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
              Our community combines products and processes to augment human intelligence, reduce waste, and provide wellbeing.
           &lt;/md-layout&gt;
  
           &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
          &lt;span class="md-headline"&gt;&lt;/span&gt;
          &lt;/md-layout&gt;
  
          &lt;md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"&gt;
  
         &lt;/md-layout&gt;
  
  &lt;/md-layout&gt;
  
    &lt;/div&gt;
  
  &lt;/template&gt;
  </code></pre>
  
  <p>THIS is the CSS </p>
  
  <pre><code>&lt;style scoped&gt;
  
  h1 {
    font-family: Helvetica neue;
    text-align: center;
    font-weight: 400;
    font-size: 49px;
    line-height: 1.1em;
    font-family: Heiti SC;
  }
  
  h2 {
    font-family: Helvetica neue;
    text-align: center;
    font-weight: 600;
    font-size: 19px;
  }
  
  h3 {
    font-family: Helvetica neue;
    text-align: center;
    font-weight: 300;
    font-size: 19px;
  }
  
  h4 {
    font-family: Helvetica neue;
    text-align: center;
    font-weight: 300;
    font-size: 19px;
  }
  
  #Identity &gt; .md-layout {
    /*background-color: lightgrey;*/
    border-color: black;
    align-items: center;
    justify-content: center;
    /*border-style: dotted;*/
    border-width: 1px;
    padding: 8px;
    font-weight: 200;
    font-size: 20px;
    line-height: 1.4em;
  }
  
  span {
    font-family: Helvetica neue;
  }
  </code></pre>
  
  <p>THIS is the css syntax for rendering the background.</p>
  
  <blockquote>
  <pre><code> #background {
        background: url(../../assets/whiteCoffeedarken.jpg);
      }
  </code></pre>
  </blockquote>
  
  <pre><code>#container &gt; .md-layout {
    /*background-color: lightgrey;*/
    border-color: black;
    align-items: center;
    justify-content: center;
    /*border-style: dotted;*/
    border-width: 1px;
    padding: 8px;
  }
  
  
  &lt;/style&gt;
  </code></pre>