CSS Background color is not full, it does not cover the whole page properly

A

7

10

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 or overflow: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!

Ardellardella answered 30/5, 2016 at 11:22 Comment(0)

F

15

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.

Fashionable answered 30/5, 2016 at 13:57 Comment(1)

I 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. – Stroud 16/6, 2022 at 6:37

N

3

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.

Notion answered 30/5, 2016 at 11:28 Comment(0)

Y

2

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 ?

Yong answered 30/5, 2016 at 11:25 Comment(0)

A

2

Color the body

 body{
     background-color:black;
  }

Actomyosin answered 30/5, 2016 at 11:26 Comment(1)

I 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. – Ardellardella 30/5, 2016 at 16:21

J

1

You have to make sure cover the whole body property

body  
{   
    background-color:#9B59B6;
    margin: -19px 0 0 0; /*-19px here to remove white space on the very top of the page*/
    width: 100%;  
}

<html>
  
  <body >
    </body>
  </html>

The problem may happen because you are implementing id of a particular div(like #background) specifically. make sure to use bodyproperty.

Jiminez answered 30/5, 2016 at 11:27 Comment(1)

Hi 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! – Ardellardella 30/5, 2016 at 16:17

H

1

You should properly use body { background: #9B59B6 } or you well need to make your #background fixed instead of absolute

#background
{ 
    position:fixed; 
    height:100%; 
    width:100%;
    background-color:#9B59B6;
    margin: -19px 0 0 0;
    width: 100%;
}

Browser have default padding on a page, you can disable that with html, body { padding: 0 } instead of the margin: -17px

Hanover answered 30/5, 2016 at 11:30 Comment(0)

P

1

body{
margin:0px;
padding:0px;
}

#background
{ 
    position:absolute; 
    height:100%; 
    width:100%;
    background-color:#9B59B6;
    margin: 0px 0 0 0;

}

Pfeffer answered 30/5, 2016 at 11:34 Comment(1)

Can you edit your proposed answer to expand on what this does and how it addresses the OP? – Pyrrhonism 30/5, 2016 at 12:11

Recommended topics

Hot tags