CSS: Creating textured backgrounds


I’m 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 it’s 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?

I tried and couldn’t match this:

enter image description here


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:


Answered By – Kamal

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.