Why background color is not displaying properly in Angular

Question

I am new to angular as in just starting. I have built this small angular app and when I edit the style.css file and add a background-color property to the body tag only the section around my form is getting colored and not the whole page (refer to the image to understand better). Can someone explain to me why?? Any explanation would be appreciated. this is the code snippet from the style.css file

/* You can add global styles to this file, and also import other style files */
@import "bulma/css/bulma.css";
body {
  background-color: burlywood;
}

.passbox {
  margin-top: 5%;
}

enter image description here

Your form is most likely overwriting the body's `background-color` with its own styles. — juliomalves, Jan 10 '21 at 11:57

Mhd Alaa Alhaj · Answer 1 · 2021-01-10T12:06:45.160

0

Because the height of your body stops at that point (because there is no more content) so as a result, the body will not fit the whole screen, instead you could use min-height: 100vh for <body>

/* You can add global styles to this file, and also import other style files */
@import "bulma/css/bulma.css";

body {
  background-color: burlywood;
  min-height: 100vh;
  margin: 0;
}

<body>

</body>

edited Jan 10 '21 at 12:06

answered Jan 10 '21 at 11:49

Mhd Alaa Alhaj

2,438
1
11
18

Thanks i will try that – Atanu Paul Jan 30 '21 at 13:07

score 0 · Answer 2 · answered Jan 10 '21 at 11:51

You will notice, upon inspection, that the body does not actually fill the entire screen. So, what you need to do, is find a way to make it (the body) full.

According to this answer, adding height: 100vh; may do it.
According to this link, adding background-size: cover; can fix it

While I do not have the full answer myself, I hope that by heading you in the right direction you'll be able to refine your search and find what you're looking for :-)

Good luck!

Why background color is not displaying properly in Angular

2 Answers2