具有线性渐变的CSS重复图案

Question

I'm on my first approach with photoshop patterns.I'm buildin a webpage where I want to use my pattern to give a nice effect to my webpage background.

The pattern I found is 120x120 px

If I was done here I should use this css:

background-imag:url(mypattern.jpg);
background-repeat:repeat;

But Im not done.Id like to **add to my page's background a linear gradient(dir=top/down col=light-blue/green) with the pattern fill layer on top of it, with blending mode=darken **.

This is the final effect:

I come to the point.

QUESTION: Combining linear vertical-gradient effect and my 120x120 pattern is it possible to find a pattern that I could use to repeat itself endlessly both vertical and horizontal??which is a common solution in this case?

Hope It's clear

thanks

Luca

Answer 1

or you can use background gradinent css3

body { background: url('pattern.jpg') repeat;}
#container {
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
}

to make it work in IE lte 7 add:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#00FFFFFF')

color is provided in #aarrggbb format, where aa=alpha(transparency), rest like normal hex color.

Answer 2

Dis will work, bg pattern with linear or radial gradient:

background-image: url(images/pattern.png),  -webkit-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -moz-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -ms-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -o-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  radial-gradient(circle at 30% 40%, rgb(20,150,224), rgb(0,0,0));

Answer 3

Apply

html{
    background: url('mypattern.jpg') repeat;
}
body{
    background: url('gradient.png') repeat-x;
    width:100%;
    height:100%;
}

where gradient.png is your white gradient which becomes transparent to it's bottom.