title: How to change style of background color using Vue.js only
body: <pre><code>import Vue from 'vue'
  import App from './App'
  import BootstrapVue from 'bootstrap-vue'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  
  
  
  Vue.config.productionTip = false
  Vue.use(BootstrapVue);
  
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    components: { App },
    template: '&lt;App/&gt;'
  })
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;webpage&gt;&lt;/webpage&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import webpage from "./components/webpage"
  
  
  export default {
    name: 'app',
    components : {
      webpage
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt; </code></pre>
  </div>
  </div>
  </p>
  <p>i tried to change the background color of  element with with vue bind styling using the command  <code>v-bind:style='{backgroundColor : color}</code>
  but its not at full height, even though i tried to remove the margin and the padding for the body element on CSS but still not working as u can see on the pic thanks</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-css lang-css prettyprint-override"><code>#wrapper{
     
      width: 650px  ;
      height: auto;
      background-color: rgb(198, 241, 200);
      margin: 0 auto;
      margin-top: 200px;
      border-radius: 10px;
  }
  html, 
  body {
      margin: 0;
      padding: 0;
      background-color:rgb(250, 28, 65);
  }</code></pre>
  </div>
  </div>
  </p>
  <p><img src="https://i.stack.imgur.com/1XLTb.png" alt="screenshot" /></p>