CSS 3 background gradient disappearing in Firefox in HTML 5 document

I’m facing an odd problem. I have a document with a gradient background color.

.loginbackground {
    background: #64889A; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#64889A'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#64889A)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #DCDCDC,  #64889A); /* for firefox 3.6+ */
    width: 100%;
    height: 100%;

When first building the page I hadn’t set a doctype (yes my bad, but it is still in pre-pre-alpha!)

I added
to my html file, and bam, the background gradient disappears.

It works fine in Chrome and IE. This is only broken in Firefox. I’m using Aurora (13a0.2). If I remove the line -moz-linear-gradient
, then it shows the default background color (no gradient).

Am I doing something wrong or is it actually a bug in Firefox?

** UPDATE ** If I give a background-size: 1000px 1000px
then it works, somewhat. I would like to give 100% 100%
or auto
, but that doesn’t work. Giving a fixed size means that it is screen resolution dependent.

Problem courtesy of: aditseng


Your problem is that per spec the gradient sizing box is the box of the element the background style is on. And in standards mode, the height of your body is 0 because you didn’t set height: 100%
on the
. You can see this if you put a border on the body.

Solution courtesy of: Boris Zbarsky

责编内容来自:CSS3 Recipes (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » CSS 3 background gradient disappearing in Firefox in HTML 5 document

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录