Xociety Xociety - 3 months ago 13
jQuery Question

Background gradients not working with Bootstrap navbar-fixed-top

So when just starting to build out my website.

Background Gradients are not working with Boostrap 3.0

navbar-fixed-top
or
bottom
, just default.

CSS

html, body
{

height: auto;
width: 100%;
overflow-x: hidden;
}

body
{


background: #000000; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #000000 , #434343); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #000000 , #434343); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}


According to the DOM, I get an "invalid property Value" error. This only happens when I use the class
navbar-fixed-bottom
, or
navbar-fixed-top


Has anyone ran into a similar issue or know what could be causing the page to appear white?

Here is a codepen: http://codepen.io/Xociety/pen/jAgoWR

Answer

the reason why this happens is because you are giving body the

height: auto;

this means that the height of the body will be calculated by the browser. but when you add navbar-fixed-bottom you add the fixed position to so the navbar height won't affect the body height and the browser calculates it as 0 height and the gradient is not shown.

if you change

height: auto;

to

height: 100%;

you tell the browser that you want the height 100% of the html. and the gradient will show since the body will show.

Comments