Background Image is not shown-CodePudding

in my Vue Application I have a login page, where I want to show a specific background. I tried to set the background like this:

`<template>
  <div ></div>
</template>

<style>
  .background {
    background: url("./images/background.svg");
    background-size: cover;      
}
</style>`

Now when I open the browser and watch the inspector, it says that the width and heigt of the div is 0x0. The html and body elements are also set to height 100% and width 100%.

When I define a specific height and width in the css the picture is shown, but I want to make the background responsive so this is no option for me. Does anyone know what the issue could be?

CodePudding user response：

If you insert the below properties it should tell the .background to fill the viewport, this may mess up the aspect ratio. But depending on your needs this can be fixed, the second set of code will prevent the img from showing up more than once and will tell it to keep the original proportions.

Hope this helps

height: 100vh;
width: 100vw;

background-repeat: no-repeat;
background-attachment: fixed;