Gray section appearing at bottom

Question

I am making a social network, and I'm using linear-gradient(#dadae3, white). This works, however a section at the bottom with the color #dadae3 shows at the bottom. I do not have an element for this section.

Screenshot:

I am looking for a solution to get rid of this gray section. Thanks!

Answer 1

Your background gradient is just repeating there because of lack of height of the body element(I assume you are using gradient on body element), also make sure you have set your background-repeat to no-repeat

Demo

html, body {
   height: 100%; /* Setting both the elements height to 100% */
}

body {
    background-repeat: no-repeat; 
    /* mmmm not required as we have set to fixed but than too no harm using it */
    background-attachment: fixed; /* Fixes background for you */
    background: linear-gradient(#dadae3, white);
}

Answer 2

It might be the background-color for the body or the html element of the page!

And the gradient is just covering the div in your page! Check the css for body or html (or the parent of this element).

You might also want to check the footer CSS properties too!

Try this for a check:

html, body, footer {
  background-color: transparent; // remove the background..
}