CSS Z-Index with Gradient Background
        Posted  
        
            by 
                Jona
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Jona
        
        
        
        Published on 2014-06-05T15:08:15Z
        Indexed on 
            2014/06/05
            15:24 UTC
        
        
        Read the original article
        Hit count: 304
        
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? i.e., 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!
© Stack Overflow or respective owner