Jquery/CSS - how to clear a CSS-background set in another file I can't edit

I'm trying to overwrite a button background, which is:

background: url("path/to/image.jpg") no-repeat scroll left center transparent;

I want to get rid of the image, but as I cannot access the file, I need to overwrite via CSS or Jquery.

Any idea how I can do this, since something easy like background: none doesn't work, I cannot use Jquery to remove the whole class and I don't want to put in a transparent 1x1px png and waste an HTTP request. The image 开发者_StackOverflow中文版has to go... any idea what I can do?

Thanks for help.

Background is a compound property, you can target just the image by background-image: none. More info on the property from MDN and W3C.

Be advised that browser support for this may vary - I've done a quick Google search and it seems that IE and Safari may have issues with this.

To target this property in vanilla JS, you'd use camel case:

element.style.backgroundImage = 'none';

If !important doesn't do the trick (see Pbirkoff's answer) then you can look directly at the original css or use some type of inspection tool (e.g. firebug). From there it's a matter of the css selection heirarchy (see http://www.w3.org/TR/CSS21/cascade.html#cascade). What you'll want to do is either create a new rule that takes precedence over the original or recreate the exact rule and just knock out the image. For example...

...in original.css:

.something {
  background: url("path/to/image.jpg") no-repeat scroll left center transparent;
}

...in your.css:

.something {
  background-image: none;
}

Does putting !important after the value work? e.g:

background: none!important;