Reputation: 37136
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
Upvotes: 2
Views: 7523
Reputation: 10572
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));
Upvotes: 0
Reputation: 9193
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.
Upvotes: 1
Reputation: 1187
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.
Upvotes: 0