treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Image overlay

  • Hey everyone,

    Right now I have an image that is being displayed as a header for my site. It is being displayed using css.
    #header-group {
    background: url(../images/header.png) no-repeat top center;
    width: 978px;
    height: 115px;
    }


    What I would like to do is place another image "png" overtop of this background - having this image pushed to the right 312px and from the top 45 px.

    I have been playing around with this forever and cannot find the best way to use this image. Does anyone have insight for me?

    Thank you.
  • Like this?

    #header-group {
    background: url(../images/header.png) no-repeat top center;
    width: 978px;
    height: 115px;
    position:relative;
    }

    #header-group img.inside-image {
    position:absolute;
    left:312px;
    top:45x;
    }
    Or this?

    #header-group {
    background: url(../images/header.png) no-repeat top center;
    width: 978px;
    height: 115px;
    }

    #header-group img.inside-image {
    margin-left:312px;
    margin-top:45x;
    }

  • Sorry I never replied, I ended up figuring it out later that day. Your example looks similar to what I did though.. thanks!