Grow your CSS skills. Land your dream job.

CSS3 Background patterns

  • # December 12, 2011 at 6:49 am

    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?

    # December 12, 2011 at 6:59 am

    Difficult to comment without a link or some code.

    # December 12, 2011 at 7:05 am

    @Paulie_D The code is the located behind each pattern.

    # December 12, 2011 at 7:11 am

    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.

    # December 12, 2011 at 7:18 am

    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.

    # December 12, 2011 at 7:20 am

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

    # December 12, 2011 at 7:22 am

    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

    # December 12, 2011 at 7:25 am

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

    # December 12, 2011 at 7:30 am

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

    # December 12, 2011 at 7:31 am

    @Paulie_D – thanks. It looks good in Chrome!

    # December 12, 2011 at 7:37 am

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

    # December 12, 2011 at 7:39 am

    Brilliant! Thanks all!

    # December 12, 2011 at 8:04 am

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

    # December 12, 2011 at 8:11 am

    @tobeeornot This one? What version of firefox?

    # December 12, 2011 at 8:17 am

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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".