Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to use CSS3 gradients and fallback to a PNG?

Tags:

html

css

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

like image 613
Tower Avatar asked Sep 04 '10 10:09

Tower


1 Answers

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

like image 90
tom Avatar answered Oct 02 '22 11:10

tom