remove background-image from style

Question

How can i remove background-image from element style. I don't want to set it to none or 0. I want to remove it completely. it's conflicting with moz-linear-gradient which is defined in another class.

<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient"></div>

Answer 1

Have you tried:

$(".mozgradient").css("background", "");

Setting the background to an empty string should remove the inline style such that class and other stylesheet settings take effect, but it shouldn't affect other styles that were set inline like width . (In this case removing it from all elements with the mozgradient class prevents the conflict you are talking about.)

From the jQuery .css() doco :

Setting the value of a style property to an empty string — eg $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property.

Answer 2

I'm not entirely sure what you are after, but I'm making an assumption that you have the inline style on the div tag, and via CSS, you're trying to over-ride that.

The only option here is the !important flag in your css file. So in your css file you'd have this:

.mozgradient {background-image(whatever) !important}

UPDATE:

I see now that you are trying to do it via jQuery. Try this:

var divWidth = $yourDiv.css('width');

$yourDiv.removeAttr('style').css('width', divWidth);

Though note that that would only work provided 'width' is the only css inline style you want to preserve. If there could be any inline style in there, you'd have to resort to either the CSS option above of using !important or using jQuery, grab the entire style attribute and get dirty with REGEX to parse out any background-image styles specifically.

UPDATE II:

OK, based on the comments, this is getting tricky. The challenge is that there may be any number of inline styles being applied via the style attribute (ugh! I feel your pain!) and we only want to clear out the background-image so that we can let the external CSS handle it.

Here's another option:

// create a div and attach the class to it
$testDiv = $('<div>').class('mozgradient').css('display','none');

// stick it in the DOM
$('body').append($testDiv);

// now cache any background image information
var bgndImg = $testDiv.css('background-image');

// get rid of the test div you want now that we have the info we need
$testDiv.destroy();

// now that we have the background-image information 
// from the external CSS file, we can re-apply it
// to any other element on the page with that class
// name to over-ride the inline style
$('.mozgradient').css('background-image',bgndImg);

Clunky, but I think it'd work.

Answer 3

If you want to dynamically remove background image, then use $("selector").css(); function in jquery or inn CSS apply background:none See more at: http://jsfiddle.net/creativegala/um3Ez/

Answer 4

The best way to handle this is at the HTML level or in whatever server-side script you use to create the HTML. Just have it not print the style attribute. Once it's there, it takes highest priority in the CSS cascade so it over-rides anything else in class or id definitions.

The second best option is to over-ride it after load using JavaScript. You can't remove it but you can replace it with whatever the class is trying to pass as long as you can add an id tag to it..

.mozgradient { background-image:url(http://domain.com/2.jpg); } /* will not work */
#fixedelement { background-image:url(http://domain.com/2.jpg); } /* will not work */
<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient" id="fixedelement"></div>
<script type="text/javascript">
fixedelement.style.backgroundImage = 'url(http://domain.com/2.jpg)'; /* will work */
</script>

Answer 5

A workaround would be to 'reset' the property. In this case, I think the following should do the trick:

div[class="mozgradient"] { background-image: none !important; }

Answer 6

$(div you use).removeAttr('style')

this should remove the style

$(div you use).attr('style', 'width: 100px');

and then should add the specified style with just height

not sure if it what you want