Javascript to add div background image?

Question

I am trying to get a div background image to change when you roll over it as well as change text color. I got the color changing ok, but the bg image isn't. Here's what I got:

In the head:

#menu1 {
    background-image: none;
}

<script language="javascript">
function txtroll(x)
{
x.style.color="white";
x.style.background-image="url(images/moragames/logo/moragames_logo_01.png);
}
</script>

In the body:

<div id="menu1" onmouseover="txtroll(this)" onmouseout="txtout(this)">

I cannot seem to get the rollover to add the background image but it changes the font color just fine. Any ideas what I'm doing wrong? Thanks!

Answer 1

Try -

x.style.backgroundImage="url(images/moragames/logo/moragames_logo_01.png)";

instead of -

 x.style.background-image="url(images/moragames/logo/moragames_logo_01.png) 

The style property of HTMLElement has no property called background-image .

Answer 2

u can do it with simple css too demo

or with Javascript demo1

css:

#menu1 {
    background-image: none;
    height:100px;
}
#menu1:hover {
    background-image: url('http://placekitten.com/200/100');
}

Answer 3

u can try this:

css:

.hover {
    background-image: "url(images/moragames/logo/moragames_logo_01.png)";
}

js:

$('#menu1').on('mouseover', function(){
    $(this).addClass('hover');
}).on('mouseout', function() {
    $(this).removeClass('hover');
});