CODEWITHSUNDEEP
htmlcss
genxgeek
genxgeek

Reputation: 13367

How to fade gradient, image or texture as background?

Very new to css and html and using html5/css3 pages.

How can I apply a gradient or image similar to the following (is that an image or texture) and fade it down the page accordingly?

enter image description here

I have been trying similar gradients like this but seems to only apply to color and not a grid/grille effect.

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));

thx

Upvotes: 1

Views: 1274

Answers (2)

zey
zey

Reputation: 6103

Use this code ,

    <div class="grilleLayer"><div>

    .grilleLayer
    {
        width:100%;
        height:700px;
    background:url('http://s8.postimg.org/90qdtbn1t/temp.png') repeat scroll left top; 
    }


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

Here is Fiddle !

or

You can generate your desire gradient color HERE

Upvotes: 1

rr-
rr-

Reputation: 14831

The grid effect can be achieved using secondary gradient on a wrapper div, with very small color stops. Here's an example of that:

body
{
    background: linear-gradient(135deg, rgba(0,0,0,0.65) 0,rgba(0,0,0,0) 1px);
    background-size: 2px 2px;
}

I'd stick to using a small texture, though, and use a CSS gradient for the main background, since you have more control of the texture images than of CSS gradients (especially that patterns such as the one you want usually need to be pixel-perfect).

Upvotes: 1

Related Questions