Div Background Image

Question

Hi All,

I am working in Mojo SDK which is used to develop Apps for Palm Pre webOS.

I am trying to add an image to the background of the div dynamically and fade it out. I am using the following code to set background of the div dynamically:

this.controller.get("imageDiv").backgroundImage = "url(../images/marks/mark-" + this.markNo + ".png)"; // Not Working

this.controller.get("imageDiv").style.background = "url(../images/marks/mark-" + this.markNo + ".png)"; // Not Working


$("imageDiv").backgroundImage = "url(../images/marks/mark-" + this.markNo + ".png)"; // Not Working

$("imageDiv").style.background = "url(../images/marks/mark-" + this.markNo + ".png)"; // Not Working

I have also tried to set a static image to the div as well but that isn't working too. Adding a background image to body is working.

#imageDiv /* Not Working */
{
    background: url(../images/launch/launch-image.png) center center;
}

imageDiv /* Not Working */
{
   background: url(../images/launch/launch-image.png) center center;
}

.imageDiv /* Not Working */
{
   background: url(../images/launch/launch-image.png) center center;
}
<div id="imageDiv"></div>

Kindly have a look and let me know if I am doing anything wrong here.

Thanks.

Haseeb Khan

Answer 1

The div doesn't have any content, so the size will be 0 x 0. Try adding something to the div and see if there is any background then. Use #imageDiv to match by id.

Answer 2

Be sure to give the DIV tag a size that matches the area you want to show:

#imageDiv
{
    background: url(../images/launch/launch-image.png) center center;
    width: 400px;
    height: 400px;
}

Answer 3

use

#imageDiv {
 background: url(../images/launch/launch-image.png) center center;
 width: 100%;
 height: 100%;
}