Grow your CSS skills. Land your dream job.

Image overlay

  • # February 19, 2012 at 10:47 am

    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.

    # February 19, 2012 at 3:16 pm

    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;
    }

    # January 28, 2013 at 5:48 pm

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".