Xociety Xociety - 1 year ago 72
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

, just default.


html, body

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


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
, or

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 Source

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;


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download