Background color doesn't apply to whole page Vue.js

Question

I'm trying to apply background-color property to my Vue.js application. Since I want it to be displayed on all pages, I'm applying CSS directly to tag in index.html:

<head>
<style>
body, html {
  padding: 0;
  margin: 0;
  width: 100%;
}
body {
  background-color: black;
}
</style>
</head>

 <body>
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>

So, as I see through the inspector, html doesn't cover the whole page

How to apply background-color to the whole page?

@laruiss still not working. It also doesn't apply background-color to html, only to the body tag — Desiigner, Jan 29 '19 at 10:21
it takes the whole body - however, the body isn't full height. You need to set HTML and body to 100% height. — Sebastian Berglönn, Jan 29 '19 at 13:55

score 10 · Answer 1 · answered Jan 29 '19 at 14:39

10

This seems to be working:

<head>
<style>
body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
}
body {
  background-color: black;
}
</style>
</head>

 <body>
   <div id="app">
     &nbsp;
   </div>
   <!-- built files will be auto injected -->
 </body>

Here the Codepen

answered Jan 29 '19 at 14:39

laruiss

3,780
1
18
29

thank you very much. Solved my same issue – CodeConnoisseur Jul 06 '21 at 22:31

score 4 · Answer 2 · answered Jan 29 '19 at 14:31

4

CSS rule is not applied because you didn't specified the height, but only the width.

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100%; // add this rule
}

answered Jan 29 '19 at 14:31

Zooly

4,736
4
34
54

Background color doesn't apply to whole page Vue.js

2 Answers2