How to position a div with background image within a div with background image?

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.

Answer 2

If you're new to this why not start with the basics before you move onto a framework like JQuery?

In HTML* and CSS:

<style type="text/css">
.outer {
    position: absolute;
    top: 100;
    left: 100;
    background-image: url('path/to/image.jpg');
}
.inner {
    position: relative;
    top: 10;
    left: 10;
    background-image: url('path/to/image1.jpg');
}
</style>

<div class="outer"><div class="inner"></div></div>