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: http://codepen.io/SiteOctopus/pen/qvDdi, 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

    background:red;

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

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