5

How would one use CSS3 gradients for a background image, and fallback to a PNG image if the gradients were not supported?

1 Answer 1

15

Here you go.

Browser who do not support CSS3 gradients will just use the image.

div {
            background-color: #1a82f7; /* fallback color */
            background-image: url(images/linear_bg_2.png); /* fallback image */
            background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}

Blog post about it on CSS Tricks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.