CSS Property included correctly but still not working-CodePudding

I have added css property correctly in style.css and all other things are also right but still its not getting on screen

css:

.header {
    width: 100%;
    height: 100vh;
    background-image: url(background.png);
    background-size: cover;
    background-position: center;
}

html:

<body>
    <div  id="header">

    </div>
</body>

CodePudding user response：

You might have linked to the Styles.css file incorrectly, try using this CSS code in the head tag using the tag and see the result or make sure your code referencing the styles document is something along the lines of

<link rel="stylesheet" href="styles.css">

Let me know if it works/ if you have another problem

CodePudding user response：

You need to reset the default browser properties, after that it will work. Also you can write like this or can use normalise.css or reset.css libraries for the same.

It works fine without resetting the default value if fixed value of height and width is given but doesn't work with vh

*{
  margin: 0;
  padding: 0;
}
.header {
    width: 100%;
    height: 100vh;
    background-image: url(background.png);
    background-size: cover;
    background-position: center;
}

<body>
    <div  id="header">

    </div>
</body>