SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help loading an image over another image

    Can somebody tell me what I'm doing wrong? For some reason the image that's being called in the CSS isn't loading over top of the image in the img tag.

    Code:
    .test {
      border: 1px solid #c00;
    }
    
    .over {
      background: transparent url("/images/over.gif" ) no-repeat;
      z-index: 2;
      width: 400px;
      height: 200px;
    }
    
    <p class="over"><a href="link.php"><img src="/images/me.jpg" width="400" height="200" class="test" /></a></p>
    This is driving me nuts!
    John Saunders

  2. #2
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    This is just a stab, but might you try to load the images in reverse?

    I don't have a lot of experience with z-index, though I know its purpose, but one wonders if it even applies to background images?

    I suspect the z-index property is being applied to the image element, and not the background.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Can somebody tell me what I'm doing wrong? For some reason the image that's being called in the CSS isn't loading over top of the image in the img tag.
    Hi,

    I'm not sure what you are trying to do but background images are in the background and html elements are in the foreground. Your background image will therefore be under the image in the html.

    If you want them the other way around then just reverse the images as suggested above. However I wonder what you are trying to do. If you are trying to make a rollover then you can just hide the image in the anchor on rollover and let the image that is in the background of the p show through.

    You can manipulate the stacking order of elements using z-index but the elements have to have a position declared before the z-index takes effect. However you should not be able to put a child image under the background of its parent (although some browsers will let you do this with negative margins, but the specs have been changed so this shouldn't be alllowed.) The elements would need to have different stacking contexts (ie not nested) and then the z-index will take affect correctly.

    If you could explain what you were trying to do exactly then it may be easier to offer specific code

    Paul

  4. #4
    SitePoint Enthusiast tenfingers's Avatar
    Join Date
    May 2004
    Location
    Alberta, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also use CSS to swap the background image on rollover. Here are some experiments I've been working on:

    http://www.tenfingers.net

    Their behaviors are unpredictable in different browsers, so it will be necessary to give them a good working over before putting anything like these into production.

    This does not preclude what Paul has said above.

  5. #5
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys. I ended up getting it to work using two different divs. I put the image I wanted to appear over top of the photo using the background CSS property in the div following the img tag and got it to work.
    John Saunders


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •