Background image for HTML acting weird-CodePudding

I've been trying to create a landing page for my website. I'm stuck in putting the background since it doesn't cover the whole page even if I set the width to 100%.

It looks like this, even if it's not zoomed out or in.

Notice the huge white part on the right side

So far, this is the only code that I have

CSS
*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.container {
width: 100%;
height: 100vh;
background: linear- 
gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(../../assets/images/background.png);
background-position: center;
background-size: cover;

}

HTML

<HTML>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEQR</title>
    <link rel="stylesheet" href="dashboard.component.css">


</head>


    <div >
    
    </div>


</html>

CodePudding user response：

  width: 100%;
  height: 23vw;
  background: url('srcimgs/topsvg.svg') no-repeat;

this may help you adjust the height

CodePudding user response：

Try this solution that i have used for my Homepage

.heroImage{
  background-image: url('./assets/wallpaper.jpg');
  background-attachment: fixed;
  background-size: cover;
}

use these CSS properties in your background img tag. I hope this helps.