Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Creating textured backgrounds

Tags:

css

I am currently struggling with setting an image background for my site that will load fast enough. I have used data url image and even optomized images but its taking to long when loading the page since the backgournd-image is still very large. Is it possible with CSS to create a textured background color like the one in the picture below? here is an EXAMPLE

I try it and have not been able to match this:

enter image description here

like image 651
CodingWonders90 Avatar asked Aug 05 '12 04:08

CodingWonders90


People also ask

How do I make my background grainy in CSS?

The trick is to use an SVG filter to create the noise, then apply that noise as a background. Layer it underneath a gradient, boost the brightness and contrast, and that's it — you have gradient that gradually dithers away.

What is textured background?

A texture background in the photo editing process refers to the perceived feel, appearance, or consistency of the surface or subject. It's essentially an image overlay of a textured surface, and when applied to your own image, adds a visual element that gives your photos depth and perceived feel.


1 Answers

with latest CSS3 technology, it is possible to create textured background. Check this out: http://lea.verou.me/css3patterns/#

but it still limited on so many aspect. And browser support is also not so ready.

your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:

http://subtlepatterns.com

like image 92
Kamal Avatar answered Oct 06 '22 02:10

Kamal