I'm looking to test some css3 background patterns and have been using the code supplied by Lea Verou but I have had no luck getting them to work on Chrome, Firefox, or Opera. I can't think why this should be the case, as they should work, at least to some degree, on these browsers. All I am getting is the plain background color specified in the code as a fallback (i'm assuming) Any ideas?
@BrigthonMike - Thanks all for those sources. That is very handy.
@ChristopherBurton - Thanks for that - you really answered my question. Re: browser prefixes, Lea mentions that support is limited at the time of writing. Would you steer clear of using these types of patterns until they are more transferable? I am guessing Chris Coyier has used CSS3 for his background on this site so it must be reasonably well supported?
@ChristopherBurton - sorry to be a pain but I just tried your jfiddle in Firefox and it didn't work, which is strange as it has the moz prefix. Also added the vendor prefix for Opera and no luck either.
@tobeeornot, no problem whatsoever. In the future, just so you're aware, you need to specify background: and then the browser specific gradient shown in the fiddle.
BTW...I'm having trouble too but perhaps we're both doing it wrong.
But should be able to find the code by inspecting the code. That worked for me. Also google Patternify for a nice little generator.
There's also tools on the web that turn images into Base64 code for use in CSS - but only use basic images otherwise it's too much code.
I've had success by adding vendor prefixes to the gradients.
See here
@ChristopherBurton - Thanks for that - you really answered my question. Re: browser prefixes, Lea mentions that support is limited at the time of writing. Would you steer clear of using these types of patterns until they are more transferable? I am guessing Chris Coyier has used CSS3 for his background on this site so it must be reasonably well supported?