I built a site using bootstrap, and applied a background gradient to the body tag.
Looks fine on webkit (chrome and safari – desktop and mobile) but not on Mozilla/Gecko. Instead of the gradient being contained to the size specified, it expands to the total height of the page.
Example: healthystartkids.ca
The yellow background gradient is different in chrome vs firefox?
My css has vendor prefixes on it.
body {
font-size: 16px;font-weight: 400;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 970px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.49, #FFFFFF),
color-stop(1, ##ECB922)
);
background-image: -o-linear-gradient(top, #FFFFFF 49%, #f1c40f 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 49%, #f1c40f 100%);
background-image: -webkit-linear-gradient(top, #FFFFFF 49%, #f1c40f 100%);
background-image: -ms-linear-gradient(top, #FFFFFF 49%, #f1c40f 100%);
background-image: linear-gradient(to top, #FFFFFF 49%, #f1c40f 100%);
height: 1000px;
background-repeat: no-repeat;
}
