html5 css3 realize background pattern

I have to realize this pattern for a background web site. Who can help me to realize the pattern? I don't know how it has to be developed.

I have realized the gradient with this css3 code:

background: rgb(152,152,152); /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk4OTg5OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left,  rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989898', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */

Answers


As commented, it is used as a fallback for some old browsers e.g. I.E.6

background: rgb(152,152,152); /* Old browsers */

Include an inline background image (using base64 encoding instead of a url)

background: url(data:image/svg+xml;base64,PD94bWw...);

For the -xx-linear-gradient lines, we call it vendor-specific properties.

background: -moz-linear-gradient(left,  rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */

They are not necessarily to be standard W3C rules. The purpose of the existence of vendor-specific props is to allow browser vendors to add their own CSS props for providing more features than what the standard suggested to developers.

The last line is used by I.E. that supports "filter" property.

So in short, the lines below the first line are just doing the same job but they are just designed for use by different browsers. It ensures that the element with the rules applied to look the same in all major browsers.


Need Your Help

How to know if a process is still running in Python?

python process

I have been doing some research on this, but all the questions (in my newbie understanding) seem to address how to figure out if ANOTHER program is running, not Python itself.

Finding Second Lowest Value within a Joined Pair SQL (using rank)

mysql join min rank

So my general problem is this I have two columns order.delivery_date and user_profiles.users and I need to find the second delivery date (aka the second to last value from the minimum) for each use...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.