title: body element having two background colors
body: <p>I gave body element red value background-color with class binding and on styling I set it white color. The only thing I want is to control the background color with my vue, but it's not at full height.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
      data(){
          return{
               text : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse voluptatibus dolores rerum excepturi corporis nisi odit minus earum adipisci non laboriosam deserunt autem architecto molestias, explicabo provident laborum omnis accusantium!',
          
               author:'',
               backgroundcolor:'#16a085',
          }
      
      
      },</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, 
  body {
      margin: 0;
      padding: 0;
      background-color:white;
  }
  
  .background{
      background-color: red
  }
  
  #wrapper{
     
      width: 650px ;
      min-height: auto;   
      background-color: rgb(198, 241, 200);
      margin: 0 auto;
      margin-top: 200px;
      border-radius: 10px;
  }
  .btn{
      position: relative;
      
      left:6px;
      margin: 10px;
      
  }
  #text{
      
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      overflow: hidden;
      padding: 10px;
      margin:30px;
      padding-top: 20px;
  }
  #icon{
      font-size:35px;
      margin:5px;
      padding-top:20px;
  }
  #twitter{
      background-color: rgb( 0, 172, 237)
  }
  #author{
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      position: relative;
      left :400px;
      font-weight: bold;
      font-size: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
     
   &lt;body :class="{ background: backgroundcolor }"&gt; 
  &lt;div id='wrapper'&gt;  
        &lt;p id="text"&gt;&lt;i id='icon' class="fas fa-quote-left"&gt; {{text}}&lt;/i&gt;&lt;/p&gt;
         &lt;span id='author'&gt;- {{author}}&lt;/span&gt;
         &lt;button id='twitter' class="btn"&gt;&lt;i class='fab fa-twitter'&gt;&lt;/i&gt;&lt;/button&gt;
         &lt;button  v-on:click="changeWidth()" @click="start " class="btn btn-success"&gt;New Quote&lt;/button&gt;
     &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;   </code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/PHpu2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PHpu2.png" alt="enter image description here"></a></p>