CSS Z-Index With Gradient Background

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

Some Text

&

Solution 1:

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.

Solution 2:

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

Solution 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 */

Share