So I have this DOM code :

<div id="foobar">
    H<br />
    e<br />
    l<br />
    l<br />
    o
</div>
<script>
    var foobarElement = document.getElementById('foobar');
    foobarElement.style.backgroundImage = '';
    foobarElement.style.background = '';
    foobarElement.style.backgroundUrl = '';
    foobarElement.style.backgroundColor = 'green';
</script>

With a CSS property on the div :

#foobar {
    background: rgba(0, 0, 0, 0) url(".png") repeat scroll 0 0;
}

(ugly) Fiddle

As you can see, I'm trying to REMOVE entirely the background attribute CSS (in my example the Google Logo), without Jquery.

In my example, I can't edit CSS, neither write DOM stuff before the <div id="foobar">.

NB: all is working fine if in CSS I use background-image with the same url instead of background

Any idea ?

Source:

• Remove Style on Element

So I have this DOM code :

<div id="foobar">
    H<br />
    e<br />
    l<br />
    l<br />
    o
</div>
<script>
    var foobarElement = document.getElementById('foobar');
    foobarElement.style.backgroundImage = '';
    foobarElement.style.background = '';
    foobarElement.style.backgroundUrl = '';
    foobarElement.style.backgroundColor = 'green';
</script>

With a CSS property on the div :

#foobar {
    background: rgba(0, 0, 0, 0) url("https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") repeat scroll 0 0;
}

(ugly) Fiddle

As you can see, I'm trying to REMOVE entirely the background attribute CSS (in my example the Google Logo), without Jquery.

In my example, I can't edit CSS, neither write DOM stuff before the <div id="foobar">.

NB: all is working fine if in CSS I use background-image with the same url instead of background

Any idea ?

Source:

• Remove Style on Element
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

• javascript
• dom

• 1 Normally this comment opens with "Welcome to Stack Overflow!", but... :-) Any code related to your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to follow some random link to help you. If the question doesn't make sense and can't be answered without the link, it's not appropriate for this site. Instead, put the minimum complete example in the question. – T.J. Crowder Commented Nov 13, 2015 at 10:19
• Well i'm not actually "new" to stack, but ok. A huge amount of question asked here contains only a JsFiddle link, but I understand your point and I will edit my question. And BTW ty for instant downvoting... – 4wk_ Commented Nov 13, 2015 at 10:28
• To be honest, I really don't know why downvoting me with close flag : I didn't said "my code is not working, I asked a question, and people answer me. Anyway, I guess running a firm make you big-headed ;) – 4wk_ Commented Nov 13, 2015 at 10:36
• 2 1. Insults are an inappropriate reaction to criticism, particularly clear, polite, and gentle criticism. 2. Never assume the person commenting and the person downvoting are the same person: You'll be wrong much more often than right, as in this case: I voted to close for the reason cited above, which is clearly laid out in here. I did not downvote, that was someone else, perhaps the person upvoting the comment (or, of course, someone else). But a downvote was reasonable, because invisible code is by definition "unclear." – T.J. Crowder Commented Nov 13, 2015 at 10:49
• 1. Relax, "big-headed" is not an insult. 2. Kindly accept my apologies for thinking "close vote" automatically downvote. My mistake. Case closed. – 4wk_ Commented Nov 13, 2015 at 12:37

4 Answers 4

You should only use the following code:

 var foobarElement = document.getElementById('foobar');
 foobarElement.style.background = 'none';

Setting a style property to '' removes the currently set value and does not set it to an empty one.

The code you have written:

var foobarElement = document.getElementById('foobar');
foobarElement.style.backgroundImage = '';
foobarElement.style.background = '';
foobarElement.style.backgroundUrl = '';
foobarElement.style.backgroundColor = 'green';

Will result into:

<div id="foobar" style="background-color: green">

So the background-image of your #foobar rule is still applied.

If you do just the foobarElement.style.background = 'none'; then it will result into:

<div id="foobar" style="background: none">

Which will overwrite the background-image set by the #foobar rule. Alternatively if you only want to remove the background image then you would use foobarElement.style.backgroundImage = 'none';

Little tricky, anyway working fine , Use

 foobarElement.style.background="0";

https://jsfiddle.net/zn2g73rz/9/

Try following is the JSFiddle

Code

function removeBackground(){
	document.getElementById("foobar").style.background= "none";
}

#foobar {
    background: rgba(0, 0, 0, 0) url("https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") repeat scroll 0 0;
}

<div id="foobar">
    H<br />
    e<br />
    l<br />
    l<br />
    o
</div>

<button onclick='removeBackground()'>Remove Background</button>
<script>
    var foobarElement = document.getElementById('foobar');
    foobarElement.style.backgroundImage = '';
    foobarElement.style.background = '';
    foobarElement.style.backgroundUrl = '';
    foobarElement.style.backgroundColor = 'green';
</script>

You can use

div.style.removeProperty('background');

div.style.removeProperty('background');
//var foobarElement = document.getElementById('foobar');
//foobarElement.style.backgroundImage = '';
//foobarElement.style.background = '';
//foobarElement.style.backgroundUrl = '';
//foobarElement.style.backgroundColor = 'green';

#foobar {
    background: rgba(0, 0, 0, 0) url("https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") repeat scroll 0 0;
}

<div id="foobar">
    H<br />
    e<br />
    l<br />
    l<br />
    o
</div>