Get a free trial // Grow your CSS skills // Land your dream job

Gradient with png fallback

  • # February 26, 2013 at 12:14 pm

    If you have a look at this codepen:, you’ll see a nice background. This is done with gradients, which some browsers don’t support, is there a way to have a PNG fallback?

    Thanks in advance!

    # February 26, 2013 at 12:20 pm

    With a repeating bg image…sure!

    Frankly, unless it’s super important that they see your gradient/image…just served up a neutral bg color.

    It’s not as though they will know the difference.

    # February 26, 2013 at 12:26 pm

    What I’m wondering is how to actually write a bit of css that will show a colour instead

    # February 26, 2013 at 1:37 pm


    # February 26, 2013 at 1:47 pm

    Yes but how would I show that only if the background can’t be displayed?

    # February 26, 2013 at 1:50 pm

    Put it before all of you other background declarations.

    If the browser can’t support gradient declarations it will ignore them.

    # February 26, 2013 at 1:55 pm

    Oh, okay thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed