CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59634

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

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.

Upvotes: 0

Views: 147

Answers (2)

Ozzy
Ozzy

Reputation: 8322

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>

Upvotes: 1

JCOC611
JCOC611

Reputation: 19759

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.

Upvotes: 2

Related Questions