CSS3 Background patterns

[tobeeornot]

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?

[Paulie_D]

Difficult to comment without a link or some code.

[tobeeornot]

@Paulie_D The code is the located behind each pattern.

[Paulie_D]

Yes I know that but perhaps your implementation is wrong…that’s what we need to see.

BTW…I’m having trouble too but perhaps we’re both doing it wrong.

[Brightonmike]

I had problems using the code that displays in her popup boxes. I think it’s 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.

[chrisburton]

Nothing is wrong. Use browser prefixes if needed. http://jsfiddle.net/wBysV

[Paulie_D]

The pop-up code isn’t “wrong” but it’s not browser specific unless you have IE10…I think.

I’ve had success by adding vendor prefixes to the gradients.

See here

[chrisburton]

I updated my fiddle. Forgot to add background before the -moz- prefix

[tobeeornot]

@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?

[tobeeornot]

@Paulie_D – thanks. It looks good in Chrome!

[chrisburton]

@tobeeornot Yeah, why not? Just use an actual image for those that do not support or you can go as simple as using a color.

[tobeeornot]

Brilliant! Thanks all!

[tobeeornot]

@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.

[chrisburton]

@tobeeornot This one? What version of firefox?

[tobeeornot]

@ChristopherBurton. Yes , that jfiddle. I am running Firefox 8.0.1.

[Author]

Posts