Home/ Questions/Q 7864127
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T23:41:38+00:00

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

  • 0

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

<body class="loginbackground">

.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 <!DOCTYPE html> 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 <html>. You can see this if you put a border on the body.

    • 0