Question

Still new to Javascript and JQuery. I have a div with a div. I set a background image in the outer div and I want to set another image in the inner div. I also want to set the inner div at top left 10 10 from the outer div.

I am using the following code (lc is outter, slc1 is inner):

$(myPage.hash('lc')).css("background-image", "url(images/leftcolumn640.jpg)");

$(myPage.hash('slc1')).width("200");
$(myPage.hash('slc1')).height("200");
$(myPage.hash('slc1')).position({
    my: "left top",
    at: "left top",
    offset: "10 10",
    of: myPage.hash('lc'),
    collision: "fit"
}); 

$(myPage.hash('slc1')).css("background-image", "url(images/Square_200w_200h.png)");

Both the inner and outer image are diplayed, but the inner image is not at 10 10 of the outer image. What am I doing wrong? How can I solve this? Thanks.

Answer 1

Try the following:

$(myPage.hash('slc1')).css({
  width:200,
  height:200,
  position:"relative",
  top:10,
  left:10,
  backgroundImage:"url(images/Square_200w_200h.png)"
});

Alternatively, you could try using margins instead of positions.