title: Set background image of div in CSS
body: <p>I have a webpage written in html and css as a prototype. Now we're implementing this using VueJS.
  I want to have a picture as a background in the homepage. The problem is that I try to create a <code>div</code> within the template, then style it from the <code>style</code> part, but the picture doesn't come up. I tried linking the picture in an <code>img</code> tag, and it shows which means that the page is correctly linked through the router, and the url is correct.</p>
  
  <p>here is the code that I think is supposed to work:</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>.background {
    background-image: url(../assets/img/21.jpg);
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
        &lt;div&gt;
          &lt;div class="background"&gt;&lt;/div&gt;
        &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to follow with the answers given <a href="https://stackoverflow.com/questions/40666716/vuejs-v-bindstyle-for-background-image-url">here</a> but they made no difference.</p>
  
  <p>am I missing something or what exactly is wrong here?</p>