CSS rule generates 404 error on some browsers

Question

In my server logs, I get a lot of errors, such as:

File does not exist: /my/path/-moz-linear-gradient(top,white, 

This seems to be related to the following Bootstrap CSS snippet, where some browsers should interpret -moz-linear-gradient as the background image to load:

 .btn{ /* some code... */ background-color: whiteSmoke; background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6)); background-image: -webkit-linear-gradient(top,white,#E6E6E6); background-image: -o-linear-gradient(top,white,#E6E6E6); background-image: linear-gradient(to bottom,white,#E6E6E6); background-image: -moz-linear-gradient(top,white,#E6E6E6); background-repeat: repeat-x; /* more code...*/ } 

How can I prevent such errors? Thanks!

Answer 1

You should use background: instead of background-image: because with background-image you need to set the path to the image and you are not using the image .. but the gradient as the background.

This is a Tool that you can use http://www.colorzilla.com/gradient-editor/ to make a gradient and copy the code if you want everything to be simpler and error free.

Update after all comments:
You can use a gradient fallback image. Like here:

 /* fallback image */ background-image: url(images/fallback-gradient.png); 

And that should solve your problem.