How to make background image not repeat itself

Question

Here's my code:

div#bg {
  background-size: contain;
  background-repeat: no-repeat;
 
  }

<div  id="bg" v-bind:style="{ background: 'url(' + require('../assets/kafa.jpg') + ')' }">

So, what I want is just one image covering whole page, but whatever I do, it's just div covering the whole page with image repeating itself (probably because I only access div with properties and not the image itself). I tried with different image sizes, but the result in always the same.

Here's how it looks like

Thanks.

EDIT1: I've also tried with min-height: 100% and min-width: 100%, but it's not working still.

Answer 1

You could do something like this:

In the component (replace background with background-image:

<div  id="bg" v-bind:style="{ 'background-image': 'url(' + require('./assets/2.jpg') + ')' }">

And in the CSS:

div#bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}