I have a button having the following CSS background rule applied:

background-image:url('/images/button_1_normal.png');

I would like to change the button's background with JavaScript. I tried the following but it didn't work.

document.getElementById(step2).style.backgroundImage = "url('images/button_1_active.png') no-repeat";

What is the problem? Thank you

I have a button having the following CSS background rule applied:

background-image:url('/images/button_1_normal.png');

I would like to change the button's background with JavaScript. I tried the following but it didn't work.

document.getElementById(step2).style.backgroundImage = "url('images/button_1_active.png') no-repeat";

What is the problem? Thank you

• javascript
• css
• background

• Check your image path. That might be the problem. If the images folder is the same level as your javascript file you have to give the path like this. "url('./images/icon_playback.png')". – Ishara Amarasekera Commented Feb 22, 2019 at 15:35

5 Answers 5

no-repeat is invalid. Only the URL part is a valid value for the background image property.

Either remove that or change your assignment to background:

document.getElementById(step2)
    .style.background="url('images/button_1_active.png') no-repeat";

I think you are wanting something like this. The first image, set by css, is repeated, as no other order is given. But when changed using javascript, you also want "no-repeat"

CSS

#button {
    background-image: url('http://imageshack.us/a/img856/3817/ticklf.png');
}

HTML

<button id="button">Button</div>

Javascript

setTimeout(function () {
    var button = document.getElementById("button");

    button.style.backgroundImage = "url('http://imageshack.us/a/img822/1917/crossn.png')";
    button.style.backgroundRepeat = "no-repeat";
}, 2000);

On jsfiddle

Check this out. This is a working sample code. Check your image path. My images folder is in the same level as my javascript file.

const actionButton = document.getElementById('action');
actionButton.style.backgroundImage = "url('./images/icon_playback.png')";

<button id="action"></button>

You set the element id to a variable, add quotes to fix the problem:

document.getElementById('step2').style.backgroundImage = "url('images/button_1_active.png') no-repeat";

JS takes only strings inside quotes as text input.

Try this:

document.getElementById("step2").style = 'background-image: none; background-color:#3d8ed4;';