1

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 class="header" id="header">

    </div>
</body>
photos mayuresh
  • 11
  • 1
  • 1
    Did you add a `` or just `` in the html file? If you didn't that might be the case – Kārlis Kazāks Dec 24 '22 at 13:04
  • Make sure there’s actually a `css` folder in the same directory as your HTML file, and that it truly contains the `style.css`. Also, inspect the `#header.header` to see if there’s other rules (with higher specificity) styles overriding your rule. – dakab Dec 24 '22 at 13:27
  • yes,,checked all things ...now i am only using id but still no op – photos mayuresh Dec 24 '22 at 13:40
  • Try to put `?=v1` at your href like `href="styles.css?=v1"`. This will force the browser to reload the script avoiding cache. – manix Dec 24 '22 at 13:59

2 Answers2

0

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

Kareem Walid
  • 1
0

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 class="header" id="header">

    </div>
</body>
Ram Ratan Bairar
  • 164
  • 1
  • 11