CSS Z-Index with Gradient Background

Question

I'm making a small webpage where the I would like the top banner with some text to remain on top, as such:

HTML:

<div id = "topBanner">

    <h1>Some Text</h1>

</div>

CSS:

#topBanner{
    position:fixed;

    background-color: #CCCCCC;
    width: 100%;
    height:200px;

    top:0;
    left:0;

    z-index:900;

    background: -moz-linear-gradient(top,  rgba(204,204,204,0.65) 0%, rgba(204,204,204,0.44) 32%, rgba(204,204,204,0.12) 82%, rgba(204,204,204,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,0.65)), color-stop(32%,rgba(204,204,204,0.44)), color-stop(82%,rgba(204,204,204,0.12)), color-stop(100%,rgba(204,204,204,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6cccccc', endColorstr='#00cccccc',GradientType=0 ); /* IE6-9 */


}
/*WebPage Header*/
h1{
    font-size:3em;
    color:blue;
    text-shadow:#CCCCCC 2px 2px 2px, #000 0 -1px 2px;

    position: absolute;
    width: 570px;

    left:50%;
    right:50%;
    line-height:20px;

    margin-left: -285px;

    z-index:999;
}

The z-index works fine, except that because I'm using a gradient any time I scroll down the elements behind the banner are still visible, albeit somewhat transparent.

Is there any way to make them total invisible? ie, what I'm trying to do is make it as though the banner is a solid color, even though it's a gradient.

Thanks in advance for any help!

Answer 1

The RGBA is specifying opacity levels, which is causing transparency (the rgba(x,x,x,x) y% - the y% is opacity). If you remove those and create the linear gradient without opacity speficied, it should remain solid.

Changing to simply rgb and remove the % should resolve the issue, though you may want to adjust your colors accordingly since they won't have that opacity level any longer.

Gradients

Answer 2

Here you have an interesting conceptual problem.

My best guess is that you are using alpha values to make a nice gradient disolving into the background. But for what I understand, you are trying it to also be as a solid when other elements are behind...

                                 
+---------------+               
| background    |  <---gradient to this             
|               |               
|    +----------+-----+         
|    | other elements |  <---solid to this       
|    |                |         
|    |                |         
|    |   +------------+-------+ 
|    |   | gradient           | 
|    |   |                    | 
+----+   |                    | 
     |   |                    | 
     |   |                    | 
     |   |                    | 
     +---+                    | 
         |                    | 
         |                    | 
         +--------------------+ 

I believe that you are trying to achieve your gradient to act differently according to several elements. Try to think what you would really like to accomplish. But if you decide to have it act as solid to everything behind it, then just put your alpha values to a 1.0 value.

So if you have originally: background: -moz-linear-gradient(top, rgba(204,204,204,0.65) 0%, rgba(204,204,204,0.44) 32%, rgba(204,204,204,0.12) 82%, rgba(204,204,204,0) 100%); /* FF3.6+ */

Change it into: background: -moz-linear-gradient(top, rgba(54,54,54,1) 0%, rgba(104,104,104,1) 32%, rgba(154,154,154,1) 82%, rgba(204,204,204,1) 100%); /* FF3.6+ */

If you look, I am making all your alphas "1", so it will be 100% solid, and instead I am changing the brightness by moving your rgb values so you still have a gradient, but this time a solid one.

Answer 3

you must use hex (or rgb) color for your gradient and use bottom gradient color for your body...

like this: DEMO

body CSS:

background:#f0f9ff;

header css:

background: #a1dbff; /* Old browsers */
background: -moz-linear-gradient(top,  #a1dbff 0%, #cbebff 53%, #f0f9ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1dbff), color-stop(53%,#cbebff), color-stop(100%,#f0f9ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1dbff', endColorstr='#f0f9ff',GradientType=0 ); /* IE6-9 */