CSS Background color is not full, it does not cover the whole page properly
Solution 1
Make use of viewheight and viewwidth:
html,
body,
#background {
width: 100vw;
min-height: 100vh;
background-color: #9B59B6;
}
Perhaps make it static (without the min- prefix) and add zero padding/margin to fix a white gap.
Solution 2
body{background-color:#9B59B6;}
This should work. But what is the html element that #background id is set to?
I guess that is where the problem is.
Solution 3
Color the body
body{
background-color:black;
}
Solution 4
Your body is not set to 100% height I think.
html, body {
height: 100%;
}
and then
#background {
height: 100%;
}
But why not set the background color property directly to the body ?
Solution 5
body{
margin:0px;
padding:0px;
}
#background
{
position:absolute;
height:100%;
width:100%;
background-color:#9B59B6;
margin: 0px 0 0 0;
}
Jason Christopher
Updated on July 23, 2022Comments
-
Jason Christopher almost 2 years
I am trying to add background color to my page, but it does not cover the whole page properly.
Screenshot 1:As it can be seen here, there are white space on the background after the cards:
CSS CODE
#background { background-color:#9B59B6; margin: -19px 0 0 0; /*-19px here to remove white space on the very top of the page*/ width: 100%; }
If I add :
position:absolute; height:100%; width:100%;
It would solve the problem, However, it would cause another problem like this:
Screenshot 2:Here, when I added more cards, and scroll it down, there is a white space below the background:
CSS CODE for screenshot 2
#background { position:absolute; height:100%; width:100%; background-color:#9B59B6; margin: -19px 0 0 0; width: 100%; }
How do I solve this? I tried using
position:relative
oroverflow:hidden
, But it does not help.I am doing this on ASP.net MVC 6, so the format is cshtml instead of html.
Please help, Thank you!
-
Ro Yo Mi almost 8 yearsCan you edit your proposed answer to expand on what this does and how it addresses the OP?
-
Jason Christopher almost 8 yearsHi JokerFan, I am doing this not on HTML5. I'm doing this on ASP.net, so the format is a little bit different, It uses div instead of body. I will edit the question a bit. Thanks for the input!
-
Jason Christopher almost 8 yearsI tried, but it is exactly like in screenshot 1, it does not cover the whole page. It only covers up to the last cards. i am doing this on cshtml ASP.net so I can't use the body property.
-
ZebraCoder almost 2 yearsI was having a problem when the page is smaller the background was not showing to full of it's height but this solved my problem.