CSS Background Noise

nice post.. will try with my blog :)

very nice. thanks!

Great solution, thanks for sharing. A curious question - how do you generate the image? Is it possible to export base64 from Photoshop?

... Dr. Google says for example: http://www.greywyvern.com/code/php/binary2base64

I found an interesting post on Stackoverflow on how to create a noisy background with html5, javascript and the canvas element, in this Fiddle there is an experiment with dynamic noise creating and Nathans idea: http://jsfiddle.net/osserpse/6SZQY/

@osserpse you have to run it through a conversion process. As far as I am aware Photoshop can't export to base64. Love the fiddle btw!

I've made the site http://pngtextures.com with which you can make those kind of backgrounds :) (the UI is kid of crap)

Here's a PNG-to-base64 converter: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

I haven't used it, but it looks pretty decent, and gives a fair bit of good-to-know info.

very clever! Thanks for the tip; I hate having to create silly little PNG textures.

I've discovered that you can create Base64 images using OpenSSL in the OS X Terminal app - all is explained here http://sketchytech.blogspot.co.uk/2012/12/base64-encoding-of-image-files.html

thanks Mite :)

@javve Love this!

@javve You should make the textures available as base 64 too

@nathansmonk Thanks! =)
Actually, if you right-click on the images and choose "Copy image url" you'll get the base64 code.

@javve Holy crap, awesome

@nathansmonk not sure where you sourced the code but I created it, so I wouldn't mind an acknowledgement. Here's the original article where I show how it was made:

http://www.mightymeta.co.uk/css-noise/

I used dopiaza.org for the base64 conversion btw. It's also good to run the png through ImageOptim first to reduce the amount of code needed.

@mightymeta I had no idea, really sorry. I originally saw the CSS in another site.

I'll update the tip with a link and credit for sure though. Thanks.

I'd definitely given up on textured backgrounds. You've given me new hope! Thanks :)

This is great! Thank you!!!

:O awesomeee

For those who want to experiment

Noise Texture Generator

You will have a the same effect as op if you click in "Yes, I want my noise be transparent."

Then go to any img to base-64 site and you are set. :)

VERY COOL!

What about using both CSS3 background gradient & text texture together ? The trick here is that background gradients are added via background-image property (so "gradient are images", see css-tricks.com/css3-gradients ). So we must use CSS3 multiple background. Note that the gradient must be AFTER the texture image url.
This code is only for webkit browsers that support both multiple backgrounds & gradient backgrounds. I'll post an update if I make it cross browser & implement a fallback.
bg-texture-and-gradient {
background-image: url(data:image/png;base64,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), -webkit-linear-gradient(top, #67B2FD, #B6F3FF);
}

@adrien-be You absolutely! That's the beauty with the noise having the alpha channel.

Funny enough, I just came across this http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients/2547064#2547064

wow...interesting. Let me try it